/* ========================================================================
   Granite Forms — shared stylesheet
   ======================================================================== */

:root {
  /* Theme: "Aswan Midnight" — almost-black matrix with slate card slabs.
     The deep #15181d is the primary surface across the whole page — no
     alternating section bands. Cards are #283038 slate slabs floating on
     the dark matrix. Headers, code blocks, and section-alt all stay at the
     matrix color, so card chrome reads like cut-outs through the slab to
     the stone below.
     Accent is dusty rose; hover is the same hue pushed deeper / more
     saturated (no hue shift). The warm brown #98745E appears as the
     function-name color in code blocks.
     Source colors sampled from polished Aswan rose granite:
       #2C343A  cool slate charcoal (matrix)
       #6F726F  medium grey mineral
       #9EAFBB  cool blue-grey quartz
       #D4B19D  soft peach (light feldspar)
       #B37A6D  dusty rose-tan (mid feldspar)
       #C45C37  intense terracotta (saturated feldspar)
       #98745E  warm brown-tan
  */
  --bg:            #15181d;             /* dark matrix — primary surface throughout */
  --bg-alt:        #15181d;              /* same as bg — no alternating bands */
  --bg-tinted:     #353e45;              /* lifted highlight zone within cards */
  --card:          #283038;              /* slate slab, clear overlay on dark bg */
  --border:        #3d4854;
  --border-strong: #b66554;              /* rose — used on card hover, matches accent-hover */
  --border-soft:   #242c33;
  --text:          #d4dde5;
  --text-muted:    #98a4b0;
  --text-subtle:   #6f726f;

  --accent:        #c87967;              /* slightly more intense rose-orange */
  --accent-hover:  #b66554;              /* darker, more saturated terminus — no hue shift */
  --accent-strong: #b66554;
  --accent-text:   #15181d;              /* button text matches the matrix */
  --accent-soft:   rgba(200, 121, 103, 0.16);
  --accent-tint:   #3a2b2c;              /* rose-tinted dark */
  --accent-border: #8a4a40;              /* dark rose — outlines on icons and featured cards */
  --accent-glow:   rgba(200, 121, 103, 0.34);

  --nav-bg:    rgba(21, 24, 29, 0.82);
  --code-bg:   #15181d;                  /* matches bg — code "carved through" cards */
  --hero-glow-1: rgba(179, 122, 109, 0.32);
  --hero-glow-2: rgba(158, 175, 187, 0.20);
  --cta-bg-1:  rgba(179, 122, 109, 0.18);
  --cta-bg-2:  rgba(158, 175, 187, 0.10);
  --cta-bg-base: linear-gradient(180deg, #283038, #353e45);

  --shadow-color: 0, 0, 0;
  --shadow-xs: 0 1px 2px rgba(var(--shadow-color), 0.04);
  --shadow-sm: 0 1px 3px rgba(var(--shadow-color), 0.06), 0 1px 2px rgba(var(--shadow-color), 0.04);
  --shadow-md: 0 8px 24px rgba(var(--shadow-color), 0.06), 0 2px 6px rgba(var(--shadow-color), 0.04);
  --shadow-lg: 0 24px 60px rgba(var(--shadow-color), 0.10), 0 4px 14px rgba(var(--shadow-color), 0.06);

  /* Syntax / code colors */
  --code-kw:  #c4b5fd;
  --code-str: #a8d8c5;
  --code-num: #d4b19d;
  --code-com: var(--text-subtle);
  --code-fn:  #98745e;                  /* warm brown — reserved for code */
  --code-tbl: #9eafbb;

  /* Status pill colors */
  --warn-bg:    #3a2b2c;
  --warn-color: #c87967;
  --warn-border: #8a4a40;
  --success-bg:    #15302a;
  --success-color: #6ee7b7;
  --success-border: #1e4338;

  /* Layout */
  --max-width: 1120px;
  --content-width: 960px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  /* Type */
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --- Application example mocks render as light slabs ---
   The hero form mock and the feature-page UI/code mocks should pop out
   from the dark page like screenshots of the app. We re-scope the CSS
   variables inside these elements so child rules using var(--card),
   var(--text), etc. resolve to a light-themed palette.
   - Accent matches the page (dusty rose) so the buttons and lookup
     pills stay on-brand.
   - The warm brown #835F4A is reserved for code blocks (function names),
     where it doubles as a syntactic color and reads as "this is the
     editor's identifier color."
   The `color: var(--text)` line re-resolves the inherited text color so
   elements inside the mock without an explicit color (titles, body copy)
   pick up the dark text. */
.hero-mock,
.mock-card,
.editor-mock,
.feature-cluster-mock,
.app-mock,
.feature-explorer-panel-mock {
  color: var(--text);

  --bg-alt:        #d0d6d9;          /* card chrome strip — slightly darker than slab */
  --bg-tinted:     #eef2f4;           /* lifted highlight zone — near white */
  --card:          #e8edef;           /* soft off-white slab — a touch lighter */
  --border:        #b8bec2;
  --border-strong: #6c747a;
  --border-soft:   #d2d8db;
  --text:          #1e1f25;
  --text-muted:    #4a525c;
  --text-subtle:   #79828c;

  --accent:        #cda399;            /* lighter pastel rose-tan — pops on the light slab */
  --accent-hover:  #b66554;
  --accent-strong: #b66554;
  --accent-text:   #1e1f25;            /* dark text on pastel rose, ~7:1 */
  --accent-soft:   rgba(205, 163, 153, 0.14);
  --accent-tint:   #f5e3da;            /* light rose pink for pills, lookup fields */
  --accent-border: #d8b1a6;
  --accent-glow:   rgba(205, 163, 153, 0.28);

  --code-bg:       #dde4e7;            /* lifted code surface on the slab */
  --code-kw:       #7c3aed;
  --code-str:      #065f46;            /* darker emerald for legibility */
  --code-num:      #a44a2a;            /* darker terracotta */
  --code-fn:       #835f4a;            /* warm brown — reserved for code only */
  --code-tbl:      #1e1f25;
  --code-com:      #475569;

  --warn-bg:    #f5e3da;
  --warn-color: #b66554;
  --warn-border: #d8b1a6;
  --success-bg:    #dcfce7;
  --success-color: #166534;
  --success-border: #bbf7d0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-feature-settings: "cv11", "ss01", "ss03";
  background:
    radial-gradient(ellipse 70% 55% at 28% 8%, var(--hero-glow-1), transparent 60%),
    radial-gradient(ellipse 65% 50% at 82% 18%, var(--hero-glow-2), transparent 65%),
    var(--bg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.55;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

/* Default hover/active treatment for text links across the site.
   Buttons styled as anchors and the brand-mark link keep their own
   color treatment. More-specific rules (.nav-link, .footer-links a)
   inherit this behavior unless they explicitly override it. */
a:not(.btn):not(.brand):hover {
  color: var(--accent);
}

a:not(.btn):not(.brand):active {
  color: var(--accent-strong);
}

p {
  margin: 0 0 1rem;
}

img {
  max-width: 100%;
  display: block;
}

::selection {
  background: var(--accent-soft);
  color: var(--text);
}

/* ------- Layout ------- */

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ------- Navigation ------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--border-soft);
  /* No bg fill — backdrop-filter alone creates the frosted-glass effect.
     Lets the page gradient show through and gives nav buttons full pop. */
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
}

.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--text);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: -0.015em;
}

.brand-logo {
  height: 32px;
  width: 32px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  font-size: 0.92rem;
}

.nav-link {
  color: var(--text-muted);
  font-weight: 500;
  transition: color 0.15s ease;
}

.nav-link.is-active {
  color: var(--text);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--text);
}

.hamburger {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hamburger span {
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all 0.25s ease;
}

.mobile-menu-toggle.is-active .hamburger span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.mobile-menu-toggle.is-active .hamburger span:nth-child(2) {
  opacity: 0;
}
.mobile-menu-toggle.is-active .hamburger span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ------- Buttons ------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1;
  transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  text-decoration: none;
  white-space: nowrap;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-text);
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 6px 16px var(--accent-glow);
}

.btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 8px 22px var(--accent-glow);
}

.btn-secondary {
  background: var(--card);
  color: var(--text);
  border-color: var(--border);
  box-shadow: var(--shadow-xs);
}

.btn-secondary:hover {
  background: var(--bg-alt);
  border-color: var(--border-strong);
}

.btn-rose-outline {
  background: transparent;
  color: var(--accent-strong);
  border-color: var(--accent);
}

.btn-rose-outline:hover {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
}

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  padding: 0.5rem 0.75rem;
}

.btn-ghost:hover {
  color: var(--text);
}

.btn-lg {
  padding: 0.95rem 1.5rem;
  font-size: 1rem;
  border-radius: 12px;
}

.btn-arrow::after {
  content: "→";
  font-size: 1.05em;
  transition: transform 0.18s ease;
}

.btn-arrow:hover::after {
  transform: translateX(2px);
}

/* ------- Hero ------- */

.hero {
  position: relative;
  padding: 5.5rem 0 4.5rem;
}

.hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.75rem 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 500;
  margin-bottom: 1.4rem;
  box-shadow: var(--shadow-xs);
}

.hero-eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
}

.hero-title {
  font-size: clamp(2.5rem, 4.6vw, 3.45rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 700;
  margin: 0 0 1.1rem;
  color: var(--text);
}

.hero-title .accent {
  background: linear-gradient(135deg, 
  var(--border),
  var(--text-subtle),
  var(--accent-strong),
  var(--accent)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-subtitle {
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 36rem;
  margin: 0 0 2rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  align-items: center;
}

.hero-meta {
  margin-top: 1.25rem;
  font-size: 0.85rem;
  color: var(--text-subtle);
}

.hero-meta a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.hero-meta a:hover {
  color: var(--accent);
}

/* ------- Hero visual: form mock card ------- */

.hero-mock-shell {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.hero-mock {
  background: var(--bg-tinted);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: rotate(0.2deg);
}

.hero-mock-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.45rem;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-alt);
  font-size: 0.8rem;
  color: var(--text-muted);
}

.hero-mock-dots {
  display: flex;
  gap: 6px;
}

.hero-mock-dots span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--border);
}

.hero-mock-edit-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  color: var(--accent-strong);
  font-weight: 600;
}

.hero-mock-edit-hint::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: var(--accent-strong);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-strong) 35%, transparent);
  animation: hero-mock-pulse 1.45s ease-out infinite;
}

@keyframes hero-mock-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-strong) 32%, transparent);
  }
  70% {
    transform: scale(1.08);
    box-shadow: 0 0 0 0.36rem color-mix(in srgb, var(--accent-strong) 0%, transparent);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-strong) 0%, transparent);
  }
}

.hero-mock-body {
  padding: 1.4rem 1.3rem 0.85rem;
}

.hero-mock [hidden] {
  display: none !important;
}

.hero-mock-scroll-area {
  overflow-y: auto;
  height: 320px;
  padding: 0;
  /* slim scrollbar — Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.hero-mock-scroll-area::-webkit-scrollbar {
  width: 5px;
}

.hero-mock-scroll-area::-webkit-scrollbar-track {
  background: transparent;
}

.hero-mock-scroll-area::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 999px;
}

.hero-mock-title {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 0.35rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.hero-mock-title-chip {
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.hero-mock-titlebar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.hero-mock-subtitle {
  margin: 0 0 0.95rem;
  color: var(--text-muted);
  font-size: 0.84rem;
}

.hero-mock-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.9rem;
  margin-bottom: 0.9rem;
}

.hero-mock-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.hero-mock-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 500;
}

.hero-mock-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  color: var(--text);
  background: #fff;
}

.hero-mock-input.is-lookup {
  border-color: var(--accent-border);
  background: var(--accent-tint);
  color: var(--accent-strong);
}

.hero-mock-pencil {
  font-size: 0.7rem;
  color: var(--accent);
  cursor: pointer;
}

.hero-mock-section {
  margin-top: 1.2rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 0.85rem;
  background: var(--bg-tinted);
}

.hero-mock-section-title {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hero-mock-table {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.4rem 0.8rem;
  font-size: 0.82rem;
}

.hero-mock-table-head {
  font-size: 0.7rem;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hero-mock-table-cell {
  padding: 0.35rem 0.55rem;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  color: var(--text);
}

.hero-mock-aggregate {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  margin-top: 1rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--border-soft);
}

.hero-mock-aggregate-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
}

.hero-mock-aggregate-label {
  color: var(--text-muted);
  min-width: 7rem;
}

.hero-mock-aggregate-label-inline {
  min-width: 0;
}

.hero-mock-aggregate-sep {
  color: var(--text-subtle);
}

.hero-mock-aggregate-status {
  margin-left: auto;
}

.hero-mock-aggregate-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.hero-mock-aggregate-note {
  color: var(--text-subtle);
  font-size: 0.76rem;
}

.hero-mock-footer {
  margin-top: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.hero-mock-footer-summary {
  align-items: stretch;
}

.hero-mock-summary-card {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-alt);
  padding: 0.5rem 0.65rem;
}

.hero-mock-summary-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.hero-mock-summary-head strong {
  color: var(--text);
  font-size: 0.77rem;
}

.hero-mock-summary-sub {
  margin: 0.2rem 0 0;
  font-size: 0.72rem;
  color: var(--text-subtle);
}

.hero-mock-summary-links {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 210px;
}

.hero-mock-submit {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-text);
  background: var(--accent);
  padding: 0.55rem 0.9rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-align: center;
  align-items: center;
  justify-content: center;
  width: 100px;
  transition: background 0.12s ease;
}

.hero-mock-form {
  display: grid;
  gap: 0.9rem;
  --hero-pane-height: 220px;
  accent-color: var(--accent);
}

.hero-mock-steps {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
  align-items: center;
}

.hero-mock-step {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  position: relative;
  flex: 1 1 0;
  text-align: left;
}


.hero-mock-step-index {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--card);
  flex-shrink: 0;
}

.hero-mock-step-label {
  white-space: nowrap;
}

.hero-mock-step.is-active {
  color: var(--text);
}

.hero-mock-step.is-active .hero-mock-step-index {
  border-color: var(--accent-border);
  background: var(--accent);
  color: var(--accent-text);
}


.hero-mock-pane {
  display: none;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 0.7rem;
  background: var(--bg-tinted);
  min-height: var(--hero-pane-height);
  overflow: auto;
}

.hero-mock-pane.is-active {
  display: block;
}

.hero-mock-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.62rem;
}

.hero-mock-control {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font-family: inherit;
  font-size: 0.82rem;
  padding: 0.45rem 0.56rem;
}

.hero-mock-control:focus,
.hero-mock-control:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Custom number-input spinner: hide browser-default ▲▼ (Chrome/Safari ugly,
   Firefox missing) and draw a styled stepper column on the right inside the
   input's border. Click handlers in scripts.js call stepUp/stepDown. */
.hero-mock-numeric {
  position: relative;
}

.hero-mock-numeric-input {
  width: 100%;
  padding-right: 1.85rem;
  -moz-appearance: textfield;
  appearance: textfield;
}

.hero-mock-numeric-input::-webkit-inner-spin-button,
.hero-mock-numeric-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.hero-mock-numeric-spinner {
  position: absolute;
  right: 1px;
  top: 1px;
  bottom: 1px;
  width: 1.4rem;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
  border-radius: 0 7px 7px 0;
  overflow: hidden;
}

.hero-mock-numeric-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--text-subtle);
  transition: background 0.15s ease, color 0.15s ease;
}

.hero-mock-numeric-btn + .hero-mock-numeric-btn {
  border-top: 1px solid var(--border);
}

.hero-mock-numeric-btn:not(:disabled):hover {
  background: color-mix(in srgb, var(--bg-tinted) 60%, var(--card));
  color: var(--text);
}

.hero-mock-numeric-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.hero-mock-numeric-btn svg {
  width: 9px;
  height: 9px;
}

.hero-mock-control-required {
  border-color: var(--accent-border);
  background: var(--accent-tint);
  color: var(--text);
  box-shadow: none;
}

.hero-mock-control-required::placeholder {
  color: color-mix(in srgb, var(--accent-text) 80%, transparent);
}

.hero-mock-control-lookup {
  border-color: var(--accent-border);
  background: var(--accent-tint);
  color: var(--accent-strong);
}

.hero-mock-control-textarea {
  min-height: 62px;
  resize: none;
}

.hero-mock-file-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  padding: 0.28rem 0.4rem 0.28rem 0.56rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
}

.hero-mock-file-name {
  font-size: 0.8rem;
  color: var(--text-muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-mock-file-btn {
  border: 1px solid var(--accent-border);
  background: var(--accent);
  color: var(--accent-text);
  border-radius: 6px;
  padding: 0.28rem 0.62rem;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.hero-mock-file-btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent);
}

.hero-mock-file-input-hidden {
  display: none;
}

.hero-mock-inline {
  margin-top: 0;
  font-size: 0.76rem;
  color: var(--text-muted);
}

.hero-mock-note {
  margin: 0 0 0.65rem;
  font-size: 0.76rem;
  color: var(--text-muted);
}

.hero-mock-control-readonly {
  background: var(--bg-tinted);
  color: var(--text-muted);
  cursor: default;
  user-select: none;
}

.hero-mock-inline-meta {
  margin-top: 0.18rem;
  font-size: 0.8rem;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 0.34rem;
  flex-wrap: wrap;
}

.hero-mock-inline-meta-item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
}

.hero-mock-inline-meta-label {
  color: var(--text-muted);
}

.hero-mock-inline-meta-sep {
  color: var(--text-subtle);
}

.hero-mock-pane[data-hero-pane="1"].is-active {
  display: flex;
  flex-direction: column;
  position: relative;
}

.hero-mock-context-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.62rem;
  margin-bottom: 0.62rem;
}

.hero-mock-context-item {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
}

.hero-mock-context-value {
  font-size: 12px;
  font-weight: 400;
  color: var(--text);
}

/* Contact list */
.hero-mock-keycontacts {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-height: 0;
}

.hero-mock-contact-list {
  display: grid;
  gap: 0.32rem;
  margin-top: 0.45rem;
  flex: 0 0 auto;
  align-content: start;
  min-height: 100px;
}

.hero-mock-contact-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  min-width: 0;
}

.hero-mock-contact-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.hero-mock-contact-name {
  flex: 1 1 auto;
  color: var(--text);
  font-weight: 500;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-mock-contact-role-select {
  min-width: 8.75rem;
  width: auto;
  flex: 0 0 auto;
  padding-top: 0.38rem;
  padding-bottom: 0.38rem;
  font-size: 0.72rem;
}

.hero-mock-contact-iconbtn {
  width: 1.55rem;
  height: 1.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--accent-strong);
  padding: 0;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.hero-mock-contact-iconbtn svg {
  width: 0.86rem;
  height: 0.86rem;
}

.hero-mock-contact-iconbtn:hover {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.hero-mock-contact-edit {
  font-size: 0.72rem;
}

.hero-mock-contact-modal-layer {
  position: absolute;
  inset: 0.5rem;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  border-radius: 10px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 2.05rem;
  z-index: 30;
}

/* Submission success alert overlay */
.hero-mock-alert-layer {
  position: absolute;
  inset: 0;
  background: rgba(20, 22, 28, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
  padding: 1rem;
  border-radius: var(--radius-xl);
}

.hero-mock-alert-layer[hidden] {
  display: none;
}

.hero-mock-alert {
  width: min(420px, 100%);
  background: var(--bg-tinted);
  border: 1px solid var(--accent-border);
  border-radius: 10px;
  padding: 1.5rem 1.4rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.hero-mock-alert-icon {
  width: 44px;
  height: 44px;
  color: var(--accent-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hero-mock-alert-icon svg {
  width: 100%;
  height: 100%;
}

.hero-mock-alert-title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text);
}

.hero-mock-alert-body {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text);
}

.hero-mock-alert-body-dim {
  color: var(--text-muted);
  font-size: 0.74rem;
}

.hero-mock-alert-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.55rem;
  flex-wrap: wrap;
  justify-content: center;
}

.hero-mock-alert-btn {
  border-radius: 6px;
  padding: 0.5rem 0.95rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.hero-mock-alert-btn-outline {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
}

.hero-mock-alert-btn-outline:hover {
  background: rgba(0, 0, 0, 0.05);
}

.hero-mock-alert-btn-solid {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-text);
}

.hero-mock-alert-btn-solid:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.hero-mock-contact-modal {
  width: min(320px, calc(100% - 0.9rem));
  border: 1px solid var(--accent-border);
  background: var(--bg-tinted);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  padding: 0.68rem 0.72rem;
}

.hero-mock-contact-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
}

.hero-mock-contact-modal-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
}

.hero-mock-contact-modal-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  flex-shrink: 0;
}

.hero-mock-contact-modal-btn {
  border-radius: 7px;
  padding: 0.34rem 0.56rem;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.hero-mock-contact-modal-btn-solid {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-text);
}

.hero-mock-contact-modal-btn-solid:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.hero-mock-contact-modal-btn-outline {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
}

.hero-mock-contact-modal-btn-outline:hover {
  background: rgba(0, 0, 0, 0.05);
}

.hero-mock-contact-modal-subtitle {
  font-size: 0.73rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.hero-mock-contact-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

/* Chips */
.hero-mock-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.52rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
}

.hero-mock-chip-role {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border: 1px solid var(--accent-border);
}

.hero-mock-chip-pending {
  background: var(--accent-tint);
  color: var(--text);
  border: 1px solid var(--accent-border);
}

.hero-mock-chip-approved {
  background: var(--success-bg);
  color: var(--success-color);
  border: 1px solid var(--success-border);
}

.hero-mock-chip-required {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border: 1px solid var(--accent-border);
}

.hero-mock-chip-not-needed {
  background: var(--bg-tinted);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.hero-mock-chip-rose-solid {
  background: var(--accent);
  color: var(--accent-text);
  border: 1px solid var(--accent);
}

.hero-mock-chip-rose-outline {
  background: transparent;
  color: var(--accent-strong);
  border: 1px solid var(--accent-border);
}

.hero-mock-chip-grey-solid {
  background: var(--border);
  color: var(--text);
  border: 1px solid var(--border);
}

.hero-mock-chip-grey-outline {
  background: transparent;
  color: var(--text-subtle);
  border: 1px solid var(--border);
}

.hero-mock-chip-accessory {
  background: var(--bg-tinted);
  color: var(--text-subtle);
  border: 1px solid var(--border);
}

/* Inline add contact form */
.hero-mock-inline-add {
  margin-top: 0.55rem;
  border: 1px dashed var(--accent-border);
  border-radius: var(--radius-md);
  padding: 0.65rem;
  background: var(--accent-soft);
}

.hero-mock-inline-add-form {
  display: grid;
  gap: 0.45rem;
}

.hero-mock-inline-add-actions {
  display: flex;
  gap: 0.75rem;
}

.hero-mock-linkbtn-muted {
  color: var(--text-subtle);
}

/* Approval row */
.hero-mock-approval-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0.55rem;
  row-gap: 0.3rem;
  font-size: 0.78rem;
  margin-top: 0.12rem;
  padding: 0.15rem 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

.hero-mock-amber-banner:not([hidden]) ~ .hero-mock-approval-row {
  margin-top: 0.42rem;
}

.hero-mock-approval-field {
  margin-top: 0rem;
  gap: 0;
}

.hero-mock-approval-field .hero-mock-amber-banner {
  margin-top: 0;
  margin-bottom: 0;
}

.hero-mock-approval-field .hero-mock-amber-banner:not([hidden]) {
  margin-bottom: 0.3rem;
}

.hero-mock-approval-field .hero-mock-amber-banner:not([hidden]) + .hero-mock-label {
  margin-top: 0.3rem;
}

.hero-mock-approval-field .hero-mock-approval-row {
  margin-top: 0.08rem;
  padding-top: 0.08rem;
}

.hero-mock-approval-field .hero-mock-amber-banner:not([hidden]) ~ .hero-mock-approval-row {
  margin-top: 0.01rem;
}

.hero-mock-approval-field .hero-mock-label {
  display: block;
  line-height: 1.08;
  margin-bottom: 0;
}

.hero-mock-approval-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  min-width: 0;
}

.hero-mock-approval-label {
  color: var(--text-muted);
  font-weight: 500;
}

/* Re-approval notice */
.hero-mock-amber-banner {
  background: var(--accent-tint);
  color: var(--text);
  border: 1px solid var(--accent-border);
  border-radius: 8px;
  padding: 0.5rem 0.65rem;
  font-size: 0.76rem;
  margin-top: 0.42rem;
  margin-bottom: 0.16rem;
  line-height: 1.5;
}

.hero-mock-rejection-banner {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: var(--accent-tint);
  color: var(--text);
  border: 1px solid var(--accent-border);
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
  margin-bottom: 0.55rem;
  line-height: 1.45;
}

.hero-mock-rejection-banner-head {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent-strong);
  letter-spacing: 0.01em;
}

.hero-mock-rejection-banner-quote {
  font-size: 0.78rem;
  color: var(--text);
  font-style: italic;
}

/* Yes / No toggle */
.hero-mock-yesno {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 0.3rem;
  align-self: flex-start;
  width: fit-content;
}

.hero-mock-yesno-btn {
  padding: 0.5rem 0.9rem;
  min-width: 74px;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--card);
  color: var(--text-muted);
  border: none;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.hero-mock-yesno-btn:hover {
  background: var(--bg-tinted);
}

.hero-mock-yesno-btn + .hero-mock-yesno-btn {
  border-left: 1px solid var(--border);
}

.hero-mock-yesno-btn.is-active {
  background: var(--accent);
  color: var(--accent-text);
}

.hero-mock-note-deadline {
  margin-bottom: 0.5rem;
  color: var(--text-muted);
}

.hero-mock-note-overdue {
  margin-top: 0.55rem;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--warn-border);
  background: var(--warn-bg);
  color: var(--warn-color);
  font-size: 0.76rem;
}

/* Contact search */
.hero-mock-contact-search-wrap {
  position: relative;
}

.hero-mock-contact-search-wrap .hero-mock-control {
  background: var(--card);
  border-color: var(--border-soft);
}

.hero-mock-contact-results {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 18px rgba(var(--shadow-color), 0.08);
  z-index: 20;
  overflow: hidden;
}

.hero-mock-contact-result-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.62rem;
  cursor: pointer;
  font-size: 0.8rem;
  transition: background 0.1s;
}

.hero-mock-contact-result-item:hover,
.hero-mock-contact-result-item.is-highlighted {
  background: var(--accent-soft);
}

.hero-mock-contact-result-name {
  flex: 1;
  color: var(--text);
  font-weight: 500;
}

.hero-mock-contact-result-meta {
  color: var(--text-muted);
  font-size: 0.72rem;
}

.hero-mock-contact-create {
  color: var(--accent-strong);
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
}

.hero-mock-contact-create:hover {
  background: var(--accent-soft);
}

.hero-mock-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0;
  font-size: 0.79rem;
  color: var(--text);
}

.hero-mock-checkbox input {
  accent-color: var(--accent);
}

.hero-mock-radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.18rem;
}

.hero-mock-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.79rem;
  color: var(--text);
  cursor: pointer;
}

/* Match the Features Beyond-the-Form radio look: 1.05rem circle, 1.5px ring,
   accent-colored inner dot on :checked carved via inset box-shadow (avoids
   ::after pseudo on replaced <input> elements, which is unreliable). */
.hero-mock-radio input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--card);
  flex-shrink: 0;
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.hero-mock-radio:hover input[type="radio"]:not(:checked) {
  border-color: var(--text-subtle);
}

.hero-mock-radio input[type="radio"]:checked {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 0.2rem var(--card);
}

.hero-mock-radio input[type="radio"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.form-mock-fieldset.hero-mock-fieldset-accent,
.form-mock-fieldset.form-mock-fieldset--accent {
  border-color: var(--accent-strong);
}

.hero-mock-lookup-input {
  padding-right: 1.8rem;
}

.hero-mock-lookup-clear {
  position: absolute;
  right: 0.42rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  border-radius: 4px;
}

.hero-mock-lookup-clear:hover {
  color: var(--accent-strong);
  background: var(--accent-soft);
}

.hero-mock-lookup-clear svg {
  width: 0.75rem;
  height: 0.75rem;
}

#hmMsaResults {
  position: fixed;
}

#hmMsaResults .hero-mock-contact-result-item {
  flex-wrap: nowrap;
}

#hmMsaResults .hero-mock-contact-result-name {
  flex: 0 0 auto;
  white-space: nowrap;
}

#hmMsaResults .hero-mock-contact-result-meta {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hero-mock-readonly-value {
  font-size: 0.82rem;
  color: var(--text);
  padding: 0.32rem 0;
  /* font-weight: 500; */
}

.hero-mock-reason-list {
  margin: 0;
  padding: 0.04rem 0 0;
  border: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.44rem;
}

@media (max-width: 560px) {
  .hero-mock-reason-list {
    grid-template-columns: 1fr;
  }
}

.hero-mock-linkbtn {
  border: none;
  background: transparent;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

#hmAddRow {
  cursor: pointer;
}

.hero-mock-rows {
  display: grid;
  gap: 0.45rem;
}

.hero-mock-row-head {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 76px 40px;
  gap: 0.28rem;
  margin-bottom: 0.2rem;
}

.hero-mock-colsort {
  border: none;
  background: transparent;
  text-align: left;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0 0.12rem;
  cursor: pointer;
}

.hero-mock-colsort.is-active {
  color: var(--accent-strong);
}

.hero-mock-row-item {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 76px 40px;
  gap: 0.28rem;
  align-items: center;
}

.hero-mock-row-remove {
  width: 1.55rem;
  height: 1.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--accent-strong);
  border-radius: 7px;
  padding: 0;
  cursor: pointer;
  justify-self: center;
}

.hero-mock-row-remove svg {
  width: 0.86rem;
  height: 0.86rem;
}

.hero-mock-row-remove:hover {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.hero-mock-validation {
  border: 1px solid var(--warn-border);
  background: var(--warn-bg);
  color: var(--warn-color);
  font-size: 0.75rem;
  border-radius: 8px;
  padding: 0.45rem 0.55rem;
  min-height: 2.15rem;
  visibility: hidden;
}

.hero-mock-validation.is-visible {
  visibility: visible;
}

.hero-mock-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.hero-mock-actions-top {
  gap: 0.35rem;
  align-items: center;
}

.hero-mock-pane[data-hero-pane="3"] .hero-mock-actions-top {
  display: grid;
  grid-template-columns: auto 40px;
  gap: 0.28rem;
  align-items: center;
}

.hero-mock-pane[data-hero-pane="3"] #hmAddRow {
  justify-self: center;
}

.hero-mock-navbtn {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.45rem 0.62rem;
  cursor: pointer;
  text-align: center;
  align-items: center;
  justify-content: center;
}

#hmNext {
  border-color: var(--accent-border);
  background: var(--accent);
  color: var(--accent-text);
  width: 100px;
}

#hmNext:hover {
  background: var(--accent-hover);
}

#hmSubmit:hover {
  background: var(--accent-hover);
}

.hero-mock-navbtn:disabled,
.hero-mock-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.hero-mock-actions-top .hero-mock-navbtn,
.hero-mock-actions-top .hero-mock-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  padding: 0.35rem 0.35rem;
}

.hero-mock-actions-bottom {
  display: flex;
  width: fit-content;
  justify-content: flex-end;
  gap: 0.9rem;
  margin: 0 0 0 auto;
  padding: 0;
  border-top: 0;
}

.hero-mock-actions-bottom [hidden] {
  display: none !important;
}

.hero-mock-navlink {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 0.18em;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.hero-mock-navlink:hover {
  color: var(--text);
  text-decoration-color: currentColor;
}

.hero-mock-navlink:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}

.hero-mock-navlink:disabled {
  color: var(--text-subtle);
  text-decoration-color: color-mix(in srgb, currentColor 25%, transparent);
  cursor: not-allowed;
}

/* ------- Sections ------- */

.section {
  padding: 5rem 0;
}

.hero + .section {
  padding-top: 1.5rem;
}

.section-tight {
  padding: 3.5rem 0;
}

.section-spacious {
  position: relative;
  padding: 8rem 0;
}

.section-alt {
  background: transparent;
}

.section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section-header {
  max-width: 38.84rem;
  margin: 0 auto 3rem;
  text-align: center;
}

.section-header.is-left {
  text-align: left;
  margin-left: 0;
}

.kicker {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 0.85rem;
}

.section-title {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-weight: 700;
  margin: 0 0 1rem;
  color: var(--text);
}

/* Subtle focus ring shown when JS shifts focus to a section heading after
   a hash-link navigation (.platform-bridge-arrow clicks, "See how it works"
   buttons, etc.). Thin 2px accent line with a generous 6px offset so it
   reads as a soft brand outline rather than a heavy browser default. */
.section-title[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
  border-radius: 6px;
}

.page-home .section-title {
  font-size: clamp(1.9rem, 3.2vw, 2.72rem);
  line-height: 1.12;
}

.section-lead {
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

.section-showcase {
  min-height: clamp(42rem, calc(100svh - 4rem), 56rem);
  display: flex;
  align-items: center;
  position: relative;
}

.section-showcase .section-inner {
  width: 100%;
  padding-bottom: 4.75rem;
}

.section-showcase-header {
  margin-bottom: 3.5rem;
  max-width: 60rem;
}

/* ------- Background overlays ------- */

.bg-foundation-overlay {
  position: relative;
  overflow: hidden;
}

.bg-foundation-overlay-svg {
  position: absolute;
  top: 4%;
  right: 18%;
  width: 400px;
  height: auto;
  color: var(--text-subtle);
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
  transform: rotate(-6deg);
}

.bg-foundation-overlay > .section-inner {
  position: relative;
  z-index: 1;
}

.use-cases-hero-svg {
  top: 17%;
  left: auto;
  right: 9%;
  width: min(560px, 48vw);
  opacity: 0.22;
  transform: rotate(-7deg);
}

.foundation-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  gap: 3rem;
  align-items: center;
}

.foundation-copy {
  margin: 0;
  max-width: none;
}

.foundation-proof {
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 88%, var(--bg-tinted)), color-mix(in srgb, var(--card) 68%, var(--bg-alt)));
  box-shadow: var(--shadow-xs);
}

.foundation-proof-heading {
  margin: 0 0 0.78rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.foundation-proof-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.foundation-proof-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.72rem;
  align-items: start;
}

.foundation-proof-item + .foundation-proof-item {
  margin-top: 0.78rem;
  padding-top: 0.78rem;
  border-top: 1px solid var(--border-soft);
}

.foundation-proof-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.9rem;
  height: 0.9rem;
  margin-top: 0.22rem;
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
}

.foundation-proof-marker::before {
  content: "✓";
}

.foundation-proof-item p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.foundation-proof-item strong {
  color: var(--text);
}

@media (max-width: 960px) {
  .bg-foundation-overlay-svg {
    display: none;
  }
}

@media (max-width: 840px) {
  .foundation-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
}

.bg-schema-overlay {
  position: relative;
  overflow: hidden;
}

.bg-schema-overlay-svg {
  position: absolute;
  top: 50%;
  height: auto;
  color: var(--text-subtle);
  opacity: 0.13;
  pointer-events: none;
  z-index: 0;
}

.bg-schema-overlay-left {
  left: -3%;
  width: 560px;
  transform: translateY(-50%) rotate(-10deg);
}

.bg-schema-overlay-right {
  right: -3%;
  width: 480px;
  transform: translateY(-50%) rotate(-10deg);
}

.bg-schema-overlay > .section-inner {
  position: relative;
  z-index: 1;
}

@media (max-width: 960px) {
  .bg-schema-overlay-svg {
    display: none;
  }
}

.bg-product-overlay {
  position: relative;
  overflow: hidden;
}

.bg-product-overlay-svg {
  position: absolute;
  width: 380px;
  height: auto;
  color: var(--text-subtle);
  opacity: 0.10;
  pointer-events: none;
  z-index: 0;
}

.bg-product-overlay-left {
  top: 50%;
  left: calc(-2% - 30px);
  transform: translateY(-50%) rotate(-10deg);
}

.bg-product-overlay-right {
  top: 50%;
  right: -2%;
  transform: translateY(-50%) rotate(-10deg);
}

.bg-product-overlay-top {
  top: 14%;
  left: 62%;
  width: 360px;
  transform: translate(-50%, -50%) rotate(-10deg);
}

.bg-product-overlay > .section-inner {
  position: relative;
  z-index: 1;
}

@media (max-width: 960px) {
  .bg-product-overlay-svg {
    display: none;
  }
}

.section-showcase-link {
  margin-top: 1rem;
}

.section-showcase-link {
  color: var(--text);
  font-size: 0.94rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.section-inline-link {
  margin: 1rem 0 0;
}

.section-showcase-link a:hover {
  color: var(--accent);
}

.section-showcase-grid {
  align-items: stretch;
}

.section-showcase-grid .feature-card {
  min-height: 15.5rem;
}

.section-showcase-foot {
  margin: 2rem 0 0;
  text-align: center;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.section-showcase-arrow.platform-bridge-arrow {
  position: absolute;
  left: 50%;
  bottom: -1.8rem;
  display: flex;
  margin: 0;
  z-index: 1;
  transform: translateX(-50%);
}

.section-showcase-arrow.platform-bridge-arrow:hover {
  transform: translateX(-50%) translateY(2px);
}

.section-panel-arrow.platform-bridge-arrow {
  position: absolute;
  left: 50%;
  bottom: 8rem;
  margin-top: 0;
  z-index: 1;
  transform: translateX(-50%);
}

.section-panel-arrow.platform-bridge-arrow:hover {
  transform: translateX(-50%) translateY(2px);
}

/* Six-card builder tooling grid on the home page. */
.feature-grid.pillar-grid {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.feature-grid.pillar-grid .feature-card {
  min-height: 12.75rem;
}

@media (min-width: 760px) {
  .feature-grid.pillar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1180px) {
  .feature-grid.pillar-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Features "Create with precision" section: a list-box-style summary of the
   Platform page's pillars on the left, with space reserved on the right
   for an SVG glyph (to be added later). The wrap holds the border and
   joins the list content area to a fake scrollbar on the right, echoing
   the spin-box look on the use-cases role wheel. */
.precision-layout {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 7rem;
}

/* Split layout: left side holds the section copy (h2 + lead + link) with
   the MS-Access-style drafting glyph as a faint backdrop SVG behind it.
   Right side holds the listbox. Intro and listbox sit centered as a pair
   in the section, with empty space on either side. The SVG is absolutely
   positioned so it doesn't drive the intro's height — the text does. */
.precision-intro {
  position: relative;
  flex: 0 1 auto;
  max-width: 28rem;
}

.precision-glyph-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36rem;
  height: auto;
  pointer-events: none;
  color: color-mix(in srgb, var(--text-muted) 10%, transparent);
}

.precision-intro-content {
  position: relative;
  z-index: 1;
  /* text-align: center; */
}

/* The listbox sits inside a column with a kicker-styled label above it,
   so the whole thing reads as a labeled form control. The kicker's own
   margin-bottom handles the gap to the listbox, so no flex gap needed. */
.precision-listbox-column {
  display: flex;
  flex-direction: column;
  flex: 0 0 21.25rem;
}

/* Listbox + fake scrollbar use the same outline technique as the use-cases
   form-feature panel: transparent backgrounds, just borders carrying the
   structure. The scrollbar is deliberately oversized and sits as its own
   separate panel (small gap between it and the listbox) so it reads as a
   stylized "spin box" rather than a real chrome scrollbar. */
.precision-listbox-wrap {
  display: flex;
  align-items: stretch;
  gap: 0.55rem;
  width: 100%;
}

/* The viewport is the clipping window; the <ul> track inside it is what
   gets transformed via translateY to bring items into view. JS sets the
   viewport height to exactly 5 item-heights on init/resize. */
.precision-listbox {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  min-width: 0;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

/* Visible focus indicator for the listbox — kill the default browser
   outline (would clip oddly inside the rounded viewport) and shift the
   existing border to accent with a soft glow. JS toggles .is-focused. */
.precision-listbox:focus {
  outline: none;
}

.precision-listbox.is-focused {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.precision-listbox-track {
  list-style: none;
  margin: 0;
  padding: 0;
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
}

.precision-listbox-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  transition: background-color 0.12s ease;
}

/* Tiny "next step" CTA that appears on the right side of the currently
   selected row — circular outline, accent color, links to platform.html.
   Hidden by default; .is-selected reveals it. */
.precision-listbox-cta {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: transparent;
  color: var(--accent);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.precision-listbox-item.is-selected .precision-listbox-cta {
  display: inline-flex;
}

.precision-listbox-cta:hover {
  background-color: var(--accent);
  color: var(--accent-text);
}

.precision-listbox-cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.precision-listbox-cta svg {
  width: 0.75rem;
  height: 0.75rem;
}

.precision-listbox-item:last-child {
  border-bottom: none;
}

.precision-listbox-item:hover:not(.is-selected) {
  background-color: color-mix(in srgb, var(--bg-tinted) 30%, transparent);
}

.precision-listbox-item.is-selected {
  background-color: var(--accent-soft);
}

.precision-listbox-item.is-selected .precision-listbox-title {
  color: var(--accent-strong);
}

.precision-listbox-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
  letter-spacing: -0.005em;
}

.precision-listbox-sub {
  font-size: 0.88rem;
  color: var(--text-subtle);
  line-height: 1.5;
}

.precision-scrollbar {
  display: flex;
  flex-direction: column;
  flex: 0 0 38px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.precision-scrollbar-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
  font: inherit;
}

.precision-scrollbar-arrow--up {
  border-bottom: 1px solid var(--border-soft);
}

.precision-scrollbar-arrow--down {
  border-top: 1px solid var(--border-soft);
}

.precision-scrollbar-arrow:hover:not(:disabled) {
  color: var(--accent-strong);
}

.precision-scrollbar-arrow:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

.precision-scrollbar-arrow:disabled {
  color: var(--text-subtle);
  opacity: 0.4;
  cursor: default;
}

.precision-scrollbar-arrow svg {
  width: 16px;
  height: 16px;
}

.precision-scrollbar-track {
  flex: 1;
  position: relative;
}

.precision-scrollbar-thumb {
  position: absolute;
  left: 6px;
  right: 6px;
  height: 62%;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: grab;
  touch-action: none;
  transition: top 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}

.precision-scrollbar-thumb:active,
.precision-scrollbar-thumb.is-dragging {
  cursor: grabbing;
  border-color: var(--accent);
}

/* At larger viewports, offset the layout right by the SVG's 4rem left
   overhang so the listbox's right edge ends up symmetric with the glyph's
   left edge around the section's horizontal center. (Padding-left + the
   default justify-content: center shifts the centered pair right by half
   the padding, which by the symmetry math equals the SVG overhang.) */
@media (min-width: 1024px) {
  .precision-layout {
    padding-left: 4rem;
  }
}

/* Below this width the intro is too narrow to support the SVG backdrop
   sensibly. Hide the SVG and let the listbox grow to the full row width;
   flex-wrap already handles stacking the intro above. */
@media (max-width: 720px) {
  .precision-glyph-svg {
    display: none;
  }

  .precision-listbox-column {
    flex: 1 1 100%;
  }
}

.full-vh-section {
  min-height: 100svh;
  display: flex;
  align-items: center;
}

.hero.full-vh-section {
  min-height: calc(100svh - 64px);
  align-items: flex-start;
  padding-top: 5.5rem;
  padding-bottom: 0.5rem;
}

.hero.full-vh-section .hero-inner {
  padding-top: 3rem;
}

/* Use Cases hero (Operations Teams): the duality-flipped content with the
   role wheel is tall, so vertically centering pushes the H1 too far down.
   Anchor to the top with breathing room from the sticky nav. */
.full-vh-section#use-cases-ops-teams {
  align-items: flex-start;
  padding-top: 11rem;
}

.full-vh-section .section-inner,
.full-vh-section .hero-inner {
  width: 100%;
}

/* ------- Feature grid (home) ------- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}

/* Four-card patterns grid on Use Cases — locked 2x2 above mobile so we don't strand a card. */
.feature-grid.patterns-grid {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 760px) {
  .feature-grid.patterns-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.feature-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.6rem 1.5rem 1.5rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.feature-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.feature-icon {
  /* Decorative outlined tile, not a button — no fill, no hover, no pointer cursor. */
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid var(--accent-border);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  font-size: 1.2rem;
  cursor: default;
  user-select: none;
}

.feature-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.feature-card h3 {
  font-size: 1.05rem;
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
  font-weight: 600;
}

.page-home .feature-card h3 {
  font-size: 1.11rem;
  line-height: 1.32;
}

.feature-card p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ------- Logo strip / pain-point bullets ------- */

.bullet-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem 2rem;
  margin-top: 2rem;
}

.bullet {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.bullet::before {
  content: "✓";
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 0.05rem;
}

/* ------- Homepage layout variants ------- */

.qualifier-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 2.5rem;
  align-items: start;
}

.qualifier-panel {
  background: linear-gradient(180deg, var(--card), color-mix(in srgb, var(--card) 78%, var(--bg-alt)));
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Home page Fit Qualifier: "validated" state when all checklist items are
   checked. Border shifts to accent — the thicker fieldset border (set on
   fieldset.qualifier-panel below) carries the active signal alone, so the
   legend's border-interruption stays clean. */
.qualifier-panel.is-valid {
  border-color: var(--accent);
}

.qualifier-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.qualifier-list li {
  position: relative;
  padding: 1.05rem 1.25rem 1.05rem 3rem;
  color: var(--text-muted);
  font-size: 0.97rem;
  line-height: 1.6;
  border-bottom: 1px solid var(--border-soft);
}

.qualifier-list li:last-child {
  border-bottom: none;
}

.qualifier-list li::before {
  content: "";
  position: absolute;
  left: 1.2rem;
  top: calc(1.05rem + 0.78rem);
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
  transform: translateY(-50%);
}

.qualifier-copy {
  align-self: center;
  margin-bottom: 0;
}

.qualifier-copy .section-lead {
  max-width: 30rem;
}

.qualifier-panel-stack {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Use Cases "How it Works" section: a fieldset-styled panel on the right
   whose rows read as label + filled text input. Mirrors the form-mock
   aesthetic at section scale so the panel itself reads as an example of
   what a Granite Forms form looks like. */
.form-feature-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 2.5rem;
  align-items: start;
}

.form-feature-copy {
  align-self: center;
  margin-bottom: 0;
}

.form-feature-copy .section-lead {
  max-width: 30rem;
}

/* Mirrors the home Fit Qualifier's structure (2px border, xl radius,
   accent-colored uppercase legend interrupting the top border) but starts
   neutral and shifts to the accent border on hover/focus, since the whole
   panel is a link to the features page. */
.form-feature-form {
  display: flex;
  flex-direction: column;
}

/* Toolbar above the fieldset: Reset (left) + See features (right primary).
   Right-aligned cluster, with the submit on the far right so it reads as
   the primary action. */
.form-feature-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
  margin-bottom: 0.85rem;
}

.form-feature-btn {
  padding: 0.5rem 0.9rem;
  font-size: 0.85rem;
  border-radius: 8px;
}

.form-feature-btn:disabled,
.form-feature-btn:disabled:hover {
  background: transparent;
  border-color: var(--border);
  color: var(--text-subtle);
  cursor: not-allowed;
  box-shadow: none;
}

.form-feature-fieldset {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.65rem;
  margin: 0;
  padding: 0.75rem 1.5rem 1.65rem;
  background: transparent;
  border: 2px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: none;
  min-inline-size: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-feature-fieldset:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.form-feature-fieldset-legend {
  margin-left: 1.1rem;
  padding: 0 0.55rem;
  background: transparent;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.form-feature-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Title-as-label outranks copy-as-value: this is marketing content posing
   as a form, not a real form, so the title carries the primary weight. */
.form-feature-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
}

.form-feature-label::after {
  content: " *";
  color: var(--accent-strong);
  font-weight: 500;
}

/* Outline-only inputs (real <textarea> elements): transparent bg, just a
   1px border holding the text. Sits cleanly on the fieldset's transparent
   surface without competing with the accent border as a second card layer.
   Height is locked to the rows attribute (no field-sizing: content) so the
   section's vertical layout doesn't shift while typing — overflow scrolls
   inside the box. */
.form-feature-input {
  width: 100%;
  padding: 0.7rem 0.85rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-sizing: border-box;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.88rem;
  line-height: 1.55;
  resize: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.form-feature-input:hover:not(:focus) {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
}

.form-feature-input:focus {
  outline: none;
  border-color: var(--accent);
  color: var(--text);
}

/* Home page Fit Qualifier: interactive checklist variant. Panel is a real
   <fieldset> with transparent background so the browser's native top-border
   interruption around the legend leaves the body bg showing through cleanly
   (no bg-match problem against the page's fixed-attachment gradients). */
fieldset.qualifier-panel {
  margin: 0;
  padding: 0;
  min-inline-size: 0;
  background: transparent;
  border-width: 2px;
  box-shadow: none;
}

.fit-checklist-legend {
  margin-left: 1.1rem;
  padding: 0 0.55rem;
  background: transparent;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-subtle);
  transition: color 0.3s ease;
}

.qualifier-panel.is-valid .fit-checklist-legend {
  color: var(--accent);
}

/* Status message above the fieldset — styled like the hero mock's rejection
  banner / umbrella notice. A min-height holds the card to the taller
  invalid message so toggling doesn't shift the layout. */
.fit-checklist-status {
  margin: 0;
  padding: 0.6rem 0.8rem;
  background: var(--bg-tinted);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1.45;
  min-height: 4rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-sizing: border-box;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.fit-checklist-status p {
  margin: 0;
  flex: 1;
}

.fit-checklist-status-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  color: var(--text-subtle);
  transition: color 0.25s ease;
}

.fit-checklist-status-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.fit-checklist-status.is-valid .fit-checklist-status-icon {
  color: var(--accent);
}

/* Secondary button sits flush right inside the status card (valid state),
   echoing where a submit button would live if this were a real form. */
.fit-checklist-status-btn {
  flex-shrink: 0;
  padding: 0.55rem 0.95rem;
  font-size: 0.85rem;
}

.fit-checklist {
  display: flex;
  flex-direction: column;
}

/* Pulse any unchecked checkbox while the fieldset isn't yet validated so
   each one reads as a clear "tap me" target. Pulses stop the moment all
   are checked. */
@keyframes fit-check-pulse {
  0% {
    box-shadow: 0 0 0 0 var(--accent);
  }
  100% {
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 0%, transparent);
  }
}

.qualifier-panel:not(.is-valid) .fit-checklist-item:not(.is-checked) .fit-checklist-check {
  animation: fit-check-pulse 1.8s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .qualifier-panel:not(.is-valid) .fit-checklist-item:not(.is-checked) .fit-checklist-check {
    animation: none;
  }
}

.fit-checklist-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.85rem;
  width: 100%;
  padding: 1.05rem 1.25rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  border-radius: 0;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.fit-checklist-item:last-child {
  border-bottom: 0;
}

/* The fieldset (qualifier-panel) has a 22px outer radius with a 2px border
   and overflow: hidden, so its inner edge curves at ~20px. Match those
   corners on the first/last items so the focus outline follows the curve
   instead of getting clipped to a sharp rectangle. */
.fit-checklist-item:first-child {
  border-top-left-radius: calc(var(--radius-xl) - 2px);
  border-top-right-radius: calc(var(--radius-xl) - 2px);
}

.fit-checklist-item:last-child {
  border-bottom-left-radius: calc(var(--radius-xl) - 2px);
  border-bottom-right-radius: calc(var(--radius-xl) - 2px);
}

.fit-checklist-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  position: relative;
  z-index: 1;
}

.fit-checklist-check {
  width: 18px;
  height: 18px;
  margin-top: 0.18rem;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  background: var(--card);
  position: relative;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.fit-checklist-item:hover .fit-checklist-check {
  border-color: var(--text-subtle);
}

.fit-checklist-item.is-checked .fit-checklist-check {
  border-color: var(--accent);
  background: var(--accent);
}

.fit-checklist-item.is-checked .fit-checklist-check::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0px;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--accent-text);
  border-bottom: 2px solid var(--accent-text);
  transform: rotate(45deg);
}

.fit-checklist-text {
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--text-subtle);
  transition: color 0.15s ease;
}

.fit-checklist-item.is-checked .fit-checklist-text {
  color: var(--text-muted);
}

.comparison-header,
.boundary-header {
  max-width: 42rem;
  margin-bottom: 2rem;
}

.section-header.is-left.boundary-header {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.boundary-header .section-lead {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

.comparison-stack {
  display: grid;
  gap: 1rem;
}

.comparison-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
}

.comparison-side {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.4rem 1.3rem;
  box-shadow: var(--shadow-sm);
}

.comparison-side.is-accent {
  border-color: var(--accent-border);
  background: linear-gradient(180deg, var(--card), var(--accent-tint));
}

.comparison-label {
  display: inline-block;
  margin-bottom: 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.comparison-side h3 {
  margin: 0 0 0.45rem;
  font-size: 1.02rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.comparison-side p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.94rem;
  line-height: 1.6;
}

.comparison-divider {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  color: var(--accent);
  font-size: 1.2rem;
  font-weight: 700;
}

/* Styled as a giant outline-based segmented control — the slab is a
   transparent "track" with internal padding; a sliding indicator (::before)
   is an accent-bordered outline (not a filled chip) so the active pane's
   text can stay at its neutral color instead of being forced onto an accent
   fill. Matches the outline aesthetic used by the use-cases form-feature
   panel and the features precision listbox. */
.boundary-slab {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: transparent;
  box-shadow: none;
}

/* Focus-only "use arrow keys" hint for the segmented controls — visual
   discoverability for sighted keyboard users without cluttering the
   default state. Pseudo-element is decorative; screen readers get the
   roving tabindex + radio/tab role semantics. */
.boundary-slab::after,
.platform-tabs-nav::after {
  content: "← → to switch";
  position: absolute;
  left: 50%;
  bottom: -1.6rem;
  transform: translateX(-50%);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--text-subtle);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  white-space: nowrap;
}

.boundary-slab:focus-within::after,
.platform-tabs-nav:focus-within::after {
  opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
  .boundary-slab::after,
  .platform-tabs-nav::after {
    transition: none;
  }
}

.boundary-slab::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 14px;
  width: calc(50% - 21px);
  box-sizing: border-box;
  background: var(--card);
  border: 2px solid var(--accent-border);
  border-radius: var(--radius-lg);
  transform: translateX(0);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  z-index: 0;
  pointer-events: none;
}

.boundary-slab[data-active-index="1"]::before {
  transform: translateX(calc(100% + 14px));
}

.boundary-pane {
  position: relative;
  z-index: 1;
  padding: 1.6rem 1.0rem;
  background: transparent;
  border: 0;
  border-radius: var(--radius-lg);
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
  transition: color 0.2s ease;
}

.boundary-pane:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
}

.boundary-pane:hover:not(.is-active) .boundary-statement {
  color: var(--accent-strong);
}

.boundary-label {
  display: inline-block;
  margin-bottom: 0.75rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  transition: color 0.2s ease;
}

.boundary-pane.is-active .boundary-label {
  color: var(--accent-strong);
}

.boundary-statement {
  margin: 0 0 0.75rem;
  color: var(--text);
  font-size: clamp(1.12rem, 1.55vw, 1.28rem);
  line-height: 1.42;
  letter-spacing: -0.015em;
  font-weight: 600;
  transition: color 0.2s ease;
}

.boundary-pane p:not(.boundary-statement) {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.65;
  transition: color 0.2s ease;
}

/* ------- Duality split (Database / Forms, design-time / runtime) ------- */

.duality-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.duality-pane {
  padding: 1.7rem 1.6rem;
}

.duality-pane + .duality-pane {
  border-left: 1px solid var(--border-soft);
}

.duality-label {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.duality-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.duality-list li {
  position: relative;
  padding-left: 1rem;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

.duality-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-size: 1.1rem;
  line-height: 1.4;
}

.duality-bridge {
  margin: 1.6rem 0 0;
  text-align: center;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ------- Duality flipped (cards-left, header-right asymmetric layout) ------- */

.duality-flipped {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}

.duality-flipped-header {
  order: 2;
  margin: 0;
  max-width: none;
}

.duality-flipped-stack {
  order: 1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.duality-flipped-stack .duality-pane {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.duality-flipped-stack .duality-pane + .duality-pane {
  border-left: none;
}

.duality-flipped--text-left .duality-flipped-header {
  order: 1;
}

.duality-flipped--text-left .duality-flipped-stack {
  order: 2;
}

.mini-card-stack {
  gap: 0.9rem;
}

.mini-card-stack .feature-card {
  padding: 1.15rem 1.2rem 1.1rem;
}

.mini-card-stack .feature-icon {
  width: 34px;
  height: 34px;
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
}

.mini-card-stack .feature-card h3 {
  font-size: 0.98rem;
  margin-bottom: 0.35rem;
}

.mini-card-stack .feature-card p {
  font-size: 0.92rem;
  line-height: 1.55;
}

/* ------- Mantine-style sticky-left feature sections ------- */

.feature-split {
  padding: 5rem 0;
  border-top: 1px solid var(--border-soft);
}

.feature-split:first-of-type {
  border-top: none;
}

.platform-tabs-shell {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.platform-tabs-nav-wrap {
  width: min(100%, 27rem);
  margin: 0 0 1.25rem;
}

.platform-tabs-group-kicker {
  margin-bottom: 0.5rem;
}

.platform-tabs-nav {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  padding: 4px;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  transition: border-color 0.24s ease, box-shadow 0.24s ease, background-color 0.24s ease;
}

@keyframes platform-tabs-pulse {
  0% {
    border-color: var(--accent-border);
    box-shadow: var(--shadow-xs), 0 0 0 0 var(--accent-glow);
  }
  70% {
    border-color: color-mix(in srgb, var(--accent-border) 82%, var(--border));
    box-shadow: var(--shadow-xs), 0 0 0 12px color-mix(in srgb, var(--accent-glow) 0%, transparent);
  }
  100% {
    border-color: var(--border);
    box-shadow: var(--shadow-xs), 0 0 0 0 color-mix(in srgb, var(--accent-glow) 0%, transparent);
  }
}

.platform-tabs-section.is-attention-active .platform-tabs-nav {
  animation: platform-tabs-pulse 1.25s ease-out 3;
}

/* One-shot attention pulses for other form-control-style elements when
   they first scroll into view. Two variants — "heavy" for elements that
   actually drive navigation (matches platform-tabs cadence), "light" for
   decorative interactivity hints (shorter, smaller glow, fewer cycles). */
@keyframes outline-pulse-heavy {
  0% {
    border-color: var(--accent);
    box-shadow: 0 0 0 0 var(--accent-glow);
  }
  70% {
    border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
    box-shadow: 0 0 0 12px transparent;
  }
  100% {
    border-color: var(--border);
    box-shadow: 0 0 0 0 transparent;
  }
}

@keyframes outline-pulse-light {
  0% {
    border-color: var(--accent);
    box-shadow: 0 0 0 0 var(--accent-glow);
  }
  60% {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    box-shadow: 0 0 0 14px transparent;
  }
  100% {
    border-color: var(--border);
    box-shadow: 0 0 0 0 transparent;
  }
}

/* Larger-scale variant of outline-pulse-light — wider spread for a bigger
   control where 14px would feel proportionally small, and slower for an
   element that's still scrolling into view by the time the pulse starts. */
@keyframes outline-pulse-broad {
  0% {
    border-color: var(--accent);
    box-shadow: 0 0 0 0 var(--accent-glow);
  }
  60% {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    box-shadow: 0 0 0 28px transparent;
  }
  100% {
    border-color: var(--border);
    box-shadow: 0 0 0 0 transparent;
  }
}

/* Heavy: Beyond-the-form group select (drives section navigation). */
.feature-explorer.is-attention-active .custom-select-trigger {
  animation: outline-pulse-heavy 1.25s ease-out 3;
}

/* Light: use-cases form-feature first input. */
.form-feature-form.is-attention-active .form-feature-field:first-of-type .form-feature-input {
  animation: outline-pulse-light 2s ease-out 1;
}

/* Light: precision listbox fake scrollbar. */
[data-precision-listbox].is-attention-active .precision-scrollbar {
  animation: outline-pulse-light 2s ease-out 1;
}

/* Light: role wheel (spin box) up/down controls. */
[data-role-wheel].is-attention-active .role-wheel-controls {
  animation: outline-pulse-light 2s ease-out 1;
}

/* Broad: home fit-boundary big segmented control — bigger spread + slower
   timing to match the slab's size and to span the tail of its scroll-in. */
[data-boundary-segmented].is-attention-active {
  animation: outline-pulse-broad 3.2s ease-out 1;
}

@media (prefers-reduced-motion: reduce) {
  .feature-explorer.is-attention-active .custom-select-trigger,
  .form-feature-form.is-attention-active .form-feature-field:first-of-type .form-feature-input,
  [data-precision-listbox].is-attention-active .precision-scrollbar,
  [data-role-wheel].is-attention-active .role-wheel-controls,
  [data-boundary-segmented].is-attention-active {
    animation: none;
  }
}

/* Sliding indicator — outline-based with a subtle card fill: 2px accent
   border + --card background so the active trigger reads as a "lifted"
   chip without forcing text onto an accent color. Defaults to 3 evenly-
   sized triggers, with a 2-tab override below. */
.platform-tabs-nav::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 16px) / 3);
  box-sizing: border-box;
  background: transparent;
  border: 2px solid var(--accent);
  border-radius: 5px;
  transform: translateX(0);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  z-index: 0;
  pointer-events: none;
}

.platform-tabs-nav[data-tab-count="2"]::before {
  width: calc((100% - 12px) / 2);
}

.platform-tabs-nav[data-active-index="1"]::before {
  transform: translateX(calc(100% + 4px));
}

.platform-tabs-nav[data-active-index="2"]::before {
  transform: translateX(calc(200% + 8px));
}

.platform-tabs-trigger {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  padding: 0.7rem 0.5rem;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  transition: color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

.platform-tabs-trigger:hover:not(.is-active) {
  color: var(--accent-strong);
}

.platform-tabs-trigger.is-active {
  color: var(--text);
  background: var(--card);
  border: 2px solid var(--accent-border);
}

.platform-tabs-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-border), 0 0 0 4px var(--accent-soft);
}

@media (prefers-reduced-motion: reduce) {
  .platform-tabs-section.is-attention-active .platform-tabs-nav {
    animation: none;
  }

  .platform-tabs-trigger {
    transition: color 0.18s ease, background-color 0.18s ease;
  }

  .platform-tabs-trigger:hover:not(.is-active) {
    transform: none;
  }
}

.platform-tabs-panels {
  position: relative;
}

.platform-tabs-section .feature-split-inner {
  max-width: none;
  margin: 0;
  padding: 0;
}

.platform-tabs-panel[hidden] {
  display: none;
}

.platform-tabs-section .feature-split-right .editor-mock {
  min-height: 480px;
  display: flex;
  flex-direction: column;
}

.platform-tabs-section .feature-split-caption {
  min-height: calc(3 * 1.55em);
}

.platform-tabs-section .feature-split-right .editor-mock-body {
  flex: 1 1 auto;
}

@media (min-width: 961px) {
  .platform-tabs-section .feature-split-inner {
    align-items: start;
  }

  .platform-tabs-section .feature-split-left,
  .platform-tabs-section .feature-split-right {
    align-self: start;
  }

  .platform-tabs-section .feature-split-left {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 24rem;
    padding-top: 5.25rem;
  }
}

.feature-split-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 4rem;
  align-items: center;
}

.feature-split-left {
  align-self: center;
}

.feature-split-left .kicker {
  margin-bottom: 0.75rem;
}

.feature-split-left h2 {
  font-size: 1.85rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 1rem;
}

.feature-split-left p {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0 0 1.25rem;
}

/* Form Carousel header should match other section headers on the Use Cases
   page rather than inheriting the (smaller) Features feature-split sizing. */
#use-case-forms .feature-split-left .kicker {
  margin-bottom: 0.85rem;
}

#use-case-forms .feature-split-left h2 {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

#use-case-forms .feature-split-left p {
  font-size: 1.08rem;
  line-height: 1.6;
}

.feature-split-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.65rem;
}

.feature-split-bullets li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.feature-split-bullets li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  margin-top: 0.55rem;
  flex-shrink: 0;
}

.feature-split-left .section-inline-link {
  margin: 1.5rem 0 0;
}

.feature-split-right {
  display: grid;
  gap: 1.25rem;
}

.feature-split-caption {
  order: 1;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-muted);
  font-style: italic;
  margin: 0;
  padding: 0 0.1rem;
}

.app-mock-caption {
  margin-top: 1.25rem;
  text-align: center;
}

.feature-split.is-reverse .feature-split-inner {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.feature-split.is-reverse .feature-split-left {
  order: 2;
}

.feature-split.is-reverse .feature-split-right {
  order: 1;
}

.platform-bridge {
  position: relative;
  overflow: hidden;
  padding: 9rem 0 6rem;
}

.platform-bridge-svg {
  position: absolute;
  height: auto;
  color: var(--text-subtle);
  opacity: 0.27;
  pointer-events: none;
  z-index: 0;
}

.platform-bridge-svg--left {
  top: -0.35rem;
  left: -2.5rem;
  width: min(540px, 42vw);
  transform: rotate(-13deg);
}

.platform-bridge-svg--right {
  right: -2rem;
  bottom: -0.2rem;
  width: min(570px, 44vw);
  height: auto;
  transform: rotate(11deg);
}

.platform-bridge > .section-inner {
  position: relative;
  z-index: 1;
}

.platform-bridge-header {
  margin-bottom: 0;
  max-width: 43rem;
}

.platform-bridge-followup {
  margin-top: 5rem;
  margin-bottom: 3rem;
}

.platform-bridge-link {
  margin-top: 2rem;
}

.platform-bridge-link a {
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.platform-bridge-link a:hover {
  color: var(--accent-hover);
}

/* Centered row for an in-flow .platform-bridge-arrow (used on Use Cases
   between sections — simpler than the absolute-positioned variant home
   uses inside .section-showcase containers). */
.bridge-arrow-row {
  display: flex;
  justify-content: center;
}

.platform-bridge-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-top: 1.9rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-subtle);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.platform-bridge-arrow svg {
  width: 1rem;
  height: 1rem;
}

.platform-bridge-arrow:hover {
  color: var(--accent-strong);
  border-color: var(--accent);
  transform: translateY(2px);
}

.platform-bridge-arrow:focus-visible {
  outline: none;
  color: var(--accent-strong);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

#home-duality {
  scroll-margin-top: 8rem;

}
#home-fit-qualifier {
  scroll-margin-top: 4.5rem;
}

#home-handoffs {
  scroll-margin-top: -1rem;
}

#platform-deep-dive,
#platform-data-layer,
#use-cases-ops-teams,
#panel-customer-service,
#panel-marketing,
#panel-sales,
#panel-field-service,
#beyond-the-form {
  scroll-margin-top: 5.5rem;
}

.screenshot-placeholder {
  background: var(--bg-tinted);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  padding: 1.5rem;
  color: var(--text-muted);
}

.screenshot-placeholder-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

/* Form Carousel — Use Cases breadth tour through 7 mocks. */

.form-carousel {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.form-carousel-viewport {
  position: relative;
  overflow: hidden;
  /* Without this, the viewport's min-content size would grow to fit the
     full 7-slide-wide track and push its grid column to full page width. */
  min-width: 0;
}

/* Track-based carousel: all slides sit in a horizontal flex row, the track
   translates left/right to bring the active slide into the viewport. Much
   simpler & more reliable than stack-and-stage because there's only one
   transform on one element. The viewport's overflow:hidden clips the
   off-screen slides. */
.form-carousel-track {
  display: flex;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
  transform: translateX(0);
  transition: transform 0.4s ease;
  will-change: transform;
}

.form-carousel-slide {
  /* flex-basis 100% of the track (= viewport width), no grow, no shrink.
     min-width: 0 prevents the implicit min-content size from blowing each
     slide out wider than 100% (which would push the whole carousel to
     full page width). */
  flex: 0 0 100%;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  /* `is-active` is just a marker for other code (the modal / submit
     handler) — no layout side-effect; the track translation determines
     visibility. */
}

@media (prefers-reduced-motion: reduce) {
  .form-carousel-track {
    transition: none;
  }
}

.form-carousel-slide .editor-mock {
  width: 100%;
  min-height: 525px;
  /* Anchors the submit-to-modal overlay (.uc-submit-modal-layer) so it
     matches the mock's exact bounds rather than the viewport (which
     includes the caption + gap below). */
  position: relative;
}

/* Wraps the titlebar + subtitle (or page-meta) so they share a consistent
   internal gap, independent of the parent page-form-mock's flex gap. */
.perm-mock-header {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

/* Neutralize the page-form pattern's page-meta offset (negative margin +
   border-bottom). The header wrapper handles spacing on its own; an explicit
   <hr class="mock-divider" /> handles the visual divider when needed. */
.form-carousel-slide .perm-mock-header .app-mock-page-meta {
  margin-top: 0;
  padding-bottom: 0;
  border-bottom: 0;
  line-height: 1.4;
}

.form-carousel-caption {
  text-align: center;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.form-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.form-carousel-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  padding: 0;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.form-carousel-nav:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
}

.form-carousel-nav:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.form-carousel-nav svg {
  width: 16px;
  height: 16px;
}

.form-carousel-dots {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 240px;
  height: 18px;
  padding: 0 5px;
}

.form-carousel-dots::before {
  /* unfilled slider track */
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  top: 50%;
  height: 2px;
  background: var(--border);
  border-radius: 2px;
  transform: translateY(-50%);
}

.form-carousel-dots::after {
  /* filled portion, width driven by --carousel-progress (0–1) set by JS */
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  height: 2px;
  width: calc(var(--carousel-progress, 0) * (100% - 10px));
  background: var(--accent);
  border-radius: 2px;
  transform: translateY(-50%);
  transition: width 0.3s ease;
  pointer-events: none;
}

.form-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  background: var(--card);
  box-shadow: inset 0 0 0 1.5px var(--border);
  cursor: pointer;
  padding: 0;
  position: relative;
  z-index: 1;
  transition: box-shadow 0.15s ease, background 0.2s ease, transform 0.2s ease;
}

.form-carousel-dot:hover {
  box-shadow: inset 0 0 0 1.5px var(--text-subtle);
}

.form-carousel-dot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.form-carousel-dot.is-active {
  background: var(--accent);
  box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 4px var(--accent-soft);
  transform: scale(1.4);
}

/* Hover/focus for the JS-wired submit buttons on the form carousel.
   Mirrors the Features page's anchor-variant hover (background darkens to
   accent-strong). Scoped via JS-added .is-uc-submit-active so it only hits
   the canonical submit button per slide — not adjacent decorative buttons
   on the same mock. */
.is-uc-submit-active {
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.is-uc-submit-active:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.is-uc-submit-active:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* The use-case-* mocks each apply `pointer-events: none` to every button
   inside them (decorative mocks). The walk-through modal layer lives
   inside the active mock so its overlay matches the mock's bounds, but
   that puts its Close/Continue buttons under the same rule — explicitly
   re-enable them. Higher specificity than `.editor-mock--use-case-* button`
   so this wins regardless of source order. */
.editor-mock .uc-submit-modal-btn {
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
}

/* Submit-to-modal walk-through layered onto the form carousel. Size and
   chrome match Home's hero contact modal (.hero-mock-contact-modal*): a
   compact top-aligned card with title + inline actions in the head, a
   divider, then body. Distinct from the in-product .app-mock-modal that
   lives inside individual form mocks — this one is meta scaffolding. */

.uc-submit-modal-layer {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Must beat .app-mock-modal-layer (z:30) on slides 4 and 6. On those
     slides JS also hides the in-product modal while ours is open so this
     one reads as a replacement, not a modal on top of a modal. */
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.uc-submit-modal-layer.is-shown {
  opacity: 1;
  visibility: visible;
}

.uc-submit-modal-layer[hidden] {
  display: none;
}

.uc-submit-modal-backdrop {
  position: absolute;
  inset: 0;
  background: transparent;
  cursor: pointer;
}

.uc-submit-modal {
  position: relative;
  width: min(340px, calc(100% - 1rem));
  max-height: calc(100% - 0.6rem);
  overflow-y: auto;
  padding: 0.85rem 0.95rem 1rem;
  /* Re-declare the light-scheme variables used by .editor-mock & friends
     so this modal reads consistently with Home's hero contact modal (which
     lives inside that light-scheme override). */
  --card: #e8edef;
  --bg-tinted: #eef2f4;
  --bg-alt: #d0d6d9;
  --border: #b8bec2;
  --border-soft: #d2d8db;
  --text: #1e1f25;
  --text-muted: #4a525c;
  --text-subtle: #79828c;
  --accent: #cda399;
  --accent-hover: #b66554;
  --accent-strong: #b66554;
  --accent-text: #1e1f25;
  --accent-soft: rgba(205, 163, 153, 0.14);
  --accent-border: #d8b1a6;
  background: var(--bg-tinted);
  color: var(--text);
  border: 1px solid var(--accent-border);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  transform: translateY(6px);
  transition: transform 0.2s ease;
  outline: none;
}

.uc-submit-modal-layer.is-shown .uc-submit-modal {
  transform: translateY(0);
}

.uc-submit-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
}

.uc-submit-modal-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  min-width: 0;
  flex: 1;
}

.uc-submit-modal-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  flex-shrink: 0;
}

.uc-submit-modal-btn {
  border-radius: 7px;
  padding: 0.34rem 0.56rem;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.uc-submit-modal-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.uc-submit-modal-btn--ghost {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
}

.uc-submit-modal-btn--ghost:hover {
  background: rgba(0, 0, 0, 0.05);
}

.uc-submit-modal-btn--solid {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-text);
}

.uc-submit-modal-btn--solid:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.uc-submit-modal .mock-divider {
  margin: 0.5rem 0 0.5rem;
}

.uc-submit-modal-body {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Slide 7's "Continue" is replaced with a moment-CTA — slightly more
   visual weight to signal "narrative handoff, not just next slide." */
.uc-submit-modal-btn--solid.is-moment-cta {
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ------- Role Wheel (Use Cases — Operations Teams section) ------- */
/* Slot-machine-style vertical wheel. Items are absolutely positioned in the
   track so they can wrap around (item 12 can appear "above" item 1). The
   active item is centered; siblings fade with distance. JS sets the per-item
   transform; CSS handles opacity per data-distance. */

.role-wheel-stack {
  /* Cancel the default duality-flipped-stack gap; the wheel handles its own. */
  gap: 0;
}

.role-wheel {
  position: relative;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0;
}

/* Spinbox frame: light bordered rectangle around the selected-value band.
   No right border — the .role-wheel-controls column closes the rectangle on
   the right and provides the internal divider via its left border. */
.role-wheel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 5.5rem;
  transform: translateY(-50%);
  border: 1px solid var(--border);
  border-right: 0;
  border-radius: 8px 0 0 8px;
  pointer-events: none;
  box-sizing: border-box;
}

.role-wheel-viewport {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 27.5rem; /* 5 × 5.5rem item height */
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent 0%, black 22%, black 78%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 22%, black 78%, transparent 100%);
}

/* The spinbutton's focus indicator: rather than drawing a hard outline
   around the masked viewport (which would clip awkwardly against the
   fade), shift the existing ::before selected-value frame + the controls
   column border to the accent color when the wheel is focused. JS toggles
   .is-focused on the .role-wheel root. */
.role-wheel-viewport:focus {
  outline: none;
}

.role-wheel.is-focused::before {
  border-color: var(--accent);
}

.role-wheel.is-focused .role-wheel-controls {
  border-color: var(--accent);
}

.role-wheel-track {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  height: 100%;
}

.role-wheel-item {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 5.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  padding: 0 1.5rem;
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition: transform 0.55s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.4s ease;
  will-change: transform, opacity;
  pointer-events: none;
}

.role-wheel-item[data-distance="0"] {
  opacity: 1;
}

.role-wheel-item[data-distance="1"] {
  opacity: 0.55;
}

.role-wheel-item[data-distance="2"] {
  opacity: 0.25;
}

.role-wheel-role {
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}

.role-wheel-item[data-distance="0"] .role-wheel-role {
  color: var(--accent-strong);
}

.role-wheel-work {
  font-size: 0.9rem;
  color: var(--text-subtle);
  line-height: 1.5;
}

.role-wheel-controls {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin-top: 0;
  flex: 0 0 36px;
  height: 5.5rem;
  position: relative;
  z-index: 1;
  border: 1px solid var(--border);
  border-radius: 0 8px 8px 0;
  box-sizing: border-box;
}

.role-wheel-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50%;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
  padding: 0;
}

.role-wheel-nav + .role-wheel-nav {
  border-top: 1px solid var(--border);
}

.role-wheel-nav:hover {
  background: color-mix(in srgb, var(--bg-tinted) 60%, var(--card));
  color: var(--accent-strong);
}

.role-wheel-nav:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  position: relative;
  z-index: 2;
}

.role-wheel-nav svg {
  width: 14px;
  height: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .role-wheel-item {
    transition: opacity 0.2s ease;
  }
}

/* Editor simulations used inside feature-split-right */

/* Full-app mock (Features Foundation panel) — entire window of the app */

.app-mock {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  font-size: 0.85rem;
  color: var(--text);
  display: flex;
  flex-direction: column;
  margin-top: 2rem;
}

/* Top nav */

.app-mock-topnav {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.55rem 1rem;
  background: var(--accent);
  color: var(--accent-text);
  border-bottom: 1px solid var(--border);
}

.app-mock-topnav-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 18px;
  height: 14px;
  background: transparent;
  border: 0;
  padding: 2px 0;
  flex-shrink: 0;
}

.app-mock-topnav-burger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-text);
  opacity: 0.85;
}

.app-mock-topnav-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.005em;
  color: var(--accent-text);
}

.app-mock-topnav-logo-glyph {
  display: inline-block;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.app-mock-topnav-spacer {
  flex: 1;
}

.app-mock-topnav-user {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--accent-text);
}

.app-mock-topnav-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.app-mock-topnav-user svg {
  width: 10px;
  height: 10px;
  color: var(--accent-text);
  opacity: 0.85;
}

/* Body layout (sidenav + main) */

.app-mock-body {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  background: var(--bg-tinted);
}

/* Side nav */

.app-mock-sidenav {
  background: var(--card);
  border-right: 1px solid var(--border-soft);
  padding: 1rem 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.76rem;
}

.app-mock-sidenav-product {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.65rem;
  margin-bottom: 0.55rem;
  font-weight: 700;
  color: var(--text);
  font-size: 0.92rem;
}

.app-mock-sidenav-product-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  flex-shrink: 0;
}

.app-mock-sidenav-product-icon svg {
  width: 12px;
  height: 12px;
}

.app-mock-sidenav-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.65rem;
  border-radius: 5px;
  color: var(--text-muted);
  font-weight: 500;
}

.app-mock-sidenav-item.is-expanded {
  color: var(--text);
  font-weight: 600;
}

.app-mock-sidenav-item svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--text-subtle);
}

.app-mock-sidenav-item-chev {
  margin-left: auto;
  width: 9px;
  height: 9px;
  color: var(--text-subtle);
}

.app-mock-sidenav-subitems {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.1rem 0 0.3rem 1.65rem;
}

.app-mock-sidenav-subitem {
  padding: 0.38rem 0.5rem;
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 0.75rem;
}

.app-mock-sidenav-subitem.is-active {
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 600;
}

/* Main content */

.app-mock-main {
  padding: 1.05rem 1.4rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
}

.app-mock-back {
  font-size: 0.72rem;
  color: var(--accent-strong);
  font-weight: 500;
  cursor: text;
  display: inline-block;
  margin-bottom: -0.15rem;
}

.app-mock-page-header {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
}

.app-mock-page-title-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

#foundationMock {
  position: relative;
}

.app-mock-cta.app-mock-manage-btn {
  margin-left: auto;
  padding: 0.5rem 0.95rem;
  font-size: 0.82rem;
}

.app-mock-kebab-wrapper {
  position: relative;
}

.app-mock-kebab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--accent-border);
  background: transparent;
  border-radius: 5px;
  cursor: pointer;
  color: var(--accent-strong);
  font-family: inherit;
  transition: background 0.12s, border-color 0.12s;
}

.app-mock-kebab-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent-border);
}

.app-mock-kebab-btn svg {
  width: 20px;
  height: 20px;
}

.app-mock-kebab-menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  min-width: 170px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow-md);
  padding: 0.3rem 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
}

.app-mock-kebab-menu[hidden] {
  display: none;
}

.app-mock-kebab-item {
  background: transparent;
  border: 0;
  padding: 0.5rem 0.9rem;
  text-align: left;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--accent-strong);
  cursor: pointer;
  white-space: nowrap;
}

.app-mock-kebab-item:hover {
  background: var(--accent-soft);
}

.app-mock-modal-layer {
  position: absolute;
  inset: 0;
  background: rgba(20, 22, 28, 0.18);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12rem;
  z-index: 30;
  border-radius: var(--radius-lg);
}

.app-mock-modal-layer[hidden] {
  display: none;
}

.app-mock-modal {
  width: min(440px, calc(100% - 2rem));
  border: 1px solid var(--accent-border);
  background: var(--bg-tinted);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  padding: 0.85rem 0.95rem;
}

.app-mock-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.app-mock-modal-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
}

.app-mock-modal-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.app-mock-modal-btn {
  border-radius: 5px;
  padding: 0.36rem 0.6rem;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.app-mock-modal-btn--outline {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
}

.app-mock-modal-btn--outline:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text);
}

.app-mock-modal-btn--solid {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-text);
}

.app-mock-modal-btn--solid:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.app-mock-modal-btn:disabled,
.app-mock-modal-btn--solid:disabled,
.app-mock-modal-btn--solid:disabled:hover {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--accent);
  border-color: var(--accent);
}

.app-mock-modal-subtitle {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.18rem;
}

.app-mock-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 0.7rem;
}

.app-mock-modal-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.app-mock-modal-label {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-subtle);
  font-weight: 600;
}

.app-mock-modal-input {
  padding: 0.42rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.78rem;
  font-family: inherit;
  background: var(--card);
  color: var(--text);
}

.app-mock-modal-input:focus {
  outline: none;
  border-color: var(--accent-strong);
}

.app-mock-modal-readonly {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem 0.85rem;
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border-soft);
}

.app-mock-modal-readonly-field {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.app-mock-modal-readonly-value {
  font-size: 0.8rem;
  color: var(--text);
  font-weight: 500;
}

/* ===== Home page: Quote Approvals demo (Sales Manager workspace) ===== */

#quoteApprovalMock {
  position: relative;
}

.home-quote-mock-wrap {
  display: flex;
  justify-content: center;
}

.home-quote-mock {
  width: 100%;
  min-height: 700px;
}

.home-quote-mock .app-mock-body {
  flex: 1;
}

/* Quote list */

/* Filter chips above the queue */
.home-quote-filters {
  display: flex;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
}

.home-quote-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-muted);
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.home-quote-filter:hover {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.home-quote-filter.is-active {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
  font-weight: 600;
}

.home-quote-filter-count {
  font-weight: 600;
  opacity: 0.85;
}

.home-quote-filter.is-active .home-quote-filter-count {
  opacity: 1;
}

.home-quote-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  background: var(--card);
  overflow: hidden;
}

.home-quote-list[hidden] {
  display: none;
}

.home-quote-item {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.5fr) 152px auto;
  row-gap: 0.3rem;
  column-gap: 1rem;
  align-items: center;
  padding: 0.85rem 1rem;
  border: 0;
  border-top: 1px solid var(--border-soft);
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  transition: background 0.12s;
}

.home-quote-item-status {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid;
  justify-self: start;
}

.home-quote-item-status--ready {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-color: var(--accent-border);
}

.home-quote-item-status--pending {
  background: var(--bg-tinted);
  color: var(--text-muted);
  border-color: var(--border);
}

/* Pending Resubmission notice inside the modal action area */
.home-quote-pending-notice {
  font-size: 0.78rem;
  color: var(--text);
  padding: 0.5rem 0.65rem;
  background: var(--accent-tint);
  border: 1px solid var(--accent-border);
  border-radius: 8px;
  line-height: 1.4;
}

.home-quote-pending-notice[hidden] {
  display: none;
}

/* Disabled decision toggle when item is pending resubmission */
.home-quote-decision.is-disabled {
  opacity: 0.55;
  pointer-events: none;
}

.home-quote-notes-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.home-quote-item:first-child {
  border-top: 0;
}

.home-quote-item:hover {
  background: var(--accent-soft);
}

.home-quote-item-customer {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.home-quote-item-customer-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
}

.home-quote-item-quote-id {
  font-size: 0.74rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

.home-quote-item-amount {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  text-align: right;
}

.home-quote-item-submitter {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.home-quote-item-submitter-name {
  font-size: 0.82rem;
  color: var(--text);
}

.home-quote-item-submitter-age {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* Inline "Notes from Requestor" subrow — spans all grid columns under the
   main row so the requester's voice is visible without opening the modal.
   Rendered as a small inset card with a lighter tinted background so it
   pops against the row chrome. Single-line ellipsis truncation; full text
   via the parent button's title attribute on hover. */
.home-quote-item-note {
  grid-column: 1 / -1;
  margin-top: 0.55rem;
  padding: 0.45rem 0.7rem;
  background: var(--bg-tinted);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  min-width: 0;
}

.home-quote-item-note-label {
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.home-quote-item-note-text {
  flex: 1;
  min-width: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-quote-item-chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-subtle);
  transition: color 0.12s;
}

.home-quote-item-chev svg {
  width: 12px;
  height: 12px;
}

.home-quote-item:hover .home-quote-item-chev {
  color: var(--accent-strong);
}

/* Empty state */

.home-quote-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  text-align: center;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  background: var(--card);
}

.home-quote-empty[hidden] {
  display: none;
}

.home-quote-empty-icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  margin-bottom: 0.95rem;
  border: 1px solid var(--accent-border);
}

.home-quote-empty-icon svg {
  width: 26px;
  height: 26px;
}

.home-quote-empty-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 0.35rem 0;
}

.home-quote-empty-text {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin: 0 0 0.95rem 0;
}

.home-quote-empty-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent-text);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 5px;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s;
}

.home-quote-empty-link:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

/* Big approve / reject segmented control inside the modal */

.home-quote-decision {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 0.95rem;
}

.home-quote-decision-btn {
  padding: 0.75rem 1rem;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text-muted);
  transition: background 0.12s, color 0.12s;
}

.home-quote-decision-btn + .home-quote-decision-btn {
  border-left: 1px solid var(--border);
}

.home-quote-decision-btn:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text);
}

.home-quote-decision-btn.is-active {
  background: var(--accent);
  color: var(--accent-text);
}

.home-quote-decision-btn.is-active:hover {
  background: var(--accent-strong);
  color: var(--accent-text);
}

/* Read-only quote details inside the modal */

.home-quote-detail {
  margin-top: 0.95rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.home-quote-detail-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
}

.home-quote-detail-row--two {
  grid-template-columns: repeat(2, 1fr);
}

.home-quote-detail-row--separated {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border-soft);
}

/* Modal title block — title + submitter subtitle stacked */
.home-quote-modal-titleblock {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
}

.home-quote-modal-subtitle {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.home-quote-detail-field {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
}

.home-quote-detail-field--wide {
  grid-column: 1 / -1;
}

.home-quote-detail-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-subtle);
  font-weight: 600;
}

.home-quote-detail-value {
  font-size: 0.85rem;
  color: var(--text);
}

/* Notes textarea */

.home-quote-notes {
  margin-top: 0.95rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.home-quote-notes-input {
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.85rem;
  font-family: inherit;
  background: var(--card);
  color: var(--text);
  resize: vertical;
  min-height: 3rem;
}

.home-quote-notes-input:focus {
  outline: none;
  border-color: var(--accent-strong);
}

/* Spend plan mini-table inside the modal */

.home-quote-spendplan-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.home-quote-spendplan {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  gap: 0;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  color: var(--text);
}

.home-quote-spendplan > * {
  padding: 0.42rem 0.6rem;
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.home-quote-spendplan > *:nth-child(3n) {
  border-right: 0;
}

.home-quote-spendplan > *:nth-last-child(-n+3) {
  border-bottom: 0;
}

.home-quote-spendplan-row-annual {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.home-quote-spendplan-totals {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.home-quote-spendplan-totals strong {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Action row — decision (left) + notes (right) */

.home-quote-action-row {
  margin-top: 0.95rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border-soft);
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.home-quote-action-left {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  min-width: 0;
}

.home-quote-action-row .home-quote-decision {
  margin-top: 0;
  border-radius: 4px;
  background: var(--card);
}

.home-quote-action-row .home-quote-decision-btn {
  padding: 0.4rem 0.3rem;
  font-size: 0.74rem;
  font-weight: 500;
  background: var(--card);
}

.home-quote-action-row .home-quote-decision-btn.is-active {
  font-weight: 600;
  background: var(--accent);
  color: var(--accent-text);
}

.home-quote-action-row .home-quote-notes {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Notification line under decision toggle */

.home-quote-notify {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.home-quote-notify[hidden] {
  display: none;
}

/* History block at modal bottom */

.home-quote-history {
  margin-top: 0.95rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
}

.home-quote-history[hidden] {
  display: none;
}

.home-quote-history-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.home-quote-history-entry {
  padding: 0.45rem 0.6rem;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text);
}

.home-quote-history-head {
  font-size: 0.74rem;
  color: var(--text-muted);
  font-weight: 600;
}

.home-quote-history-quote {
  color: var(--text);
}

.home-quote-history-empty {
  color: var(--text-subtle);
  font-style: italic;
}

/* Modal positioning override — closer to top so users see it without scrolling */

#quoteApprovalMock .app-mock-modal-layer {
  align-items: center;
  padding-top: 0;
}

#quoteApprovalMock .app-mock-modal {
  width: min(720px, calc(100% - 2rem));
}

#quoteApprovalMock .app-mock-modal-btn {
  padding: 0.5rem 0.95rem;
  font-size: 0.84rem;
  border-radius: 6px;
}

.app-mock-page-title {
  font-size: 1.55rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--text);
}

.app-mock-page-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.app-mock-page-meta-sep {
  color: var(--text-subtle);
}

/* Tabs */

.app-mock-tabs {
  display: flex;
  align-items: stretch;
  gap: 0.05rem;
  border-bottom: 1px solid var(--border);
  margin-top: 0.2rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.app-mock-tabs::-webkit-scrollbar {
  display: none;
}

.app-mock-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.7rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: inherit;
  cursor: pointer;
}

.app-mock-tab svg {
  width: 14px;
  height: 14px;
  color: var(--text-subtle);
  flex-shrink: 0;
  transition: color 0.12s;
}

.app-mock-tab {
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}

.app-mock-tab:hover:not(.is-active) {
  color: var(--text);
  background: var(--accent-soft);
  border-bottom-color: var(--accent-border);
}

.app-mock-tab:hover:not(.is-active) svg {
  color: var(--accent-strong);
}

.app-mock-tab.is-active {
  color: var(--text);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

#foundationMock .app-mock-tab:focus-visible {
  outline: none;
  background: var(--accent-soft);
  box-shadow: 0 0 0 2px var(--accent-border), 0 0 0 4px var(--accent-soft);
}

.app-mock-tab.is-active svg {
  color: var(--accent-strong);
}

/* Tab pane container */

.app-mock-tab-stack {
  display: grid;
  grid-template-areas: "stack";
  min-width: 0;
}

.app-mock-tab-pane {
  grid-area: stack;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding-top: 0.5rem;
  min-width: 0;
}

.app-mock-tab-pane[hidden] {
  visibility: hidden;
  pointer-events: none;
}

/* Cards inside tab pane */

.app-mock-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.95rem 0.5rem;
  border-bottom: 1px solid var(--border-soft);
}

.app-mock-card-title {
  font-size: 0.92rem;
  font-weight: 600;
  margin: 0;
  color: var(--text);
}

.app-mock-card-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
}

.app-mock-card-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
}

.app-mock-card-icon-btn svg {
  width: 13px;
  height: 13px;
}

.app-mock-card-icon-btn--accent {
  color: var(--accent-strong);
  border-color: var(--accent-border);
}

.app-mock-card-head-meta {
  font-size: 0.7rem;
  color: var(--text-subtle);
  font-weight: 400;
  margin-left: auto;
}

.app-mock-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.32rem 0.65rem;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--accent-text);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 5px;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background 0.15s, border-color 0.15s;
}

.app-mock-cta:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

#foundationMock .app-mock-manage-btn:focus-visible,
#foundationMock .app-mock-cta:focus-visible,
#foundationMock .app-mock-asset--add:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-border), 0 0 0 4px var(--accent-soft);
}

.app-mock-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.app-mock-checklist-item {
  border-top: 1px solid var(--border-soft);
}

.app-mock-checklist-item:first-child {
  border-top: 0;
}

.app-mock-checklist-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.6rem 0.95rem;
  background: transparent;
  border: 0;
  font-family: inherit;
  text-align: left;
  color: inherit;
}

button.app-mock-checklist-row {
  cursor: pointer;
}

button.app-mock-checklist-row:hover {
  background: var(--accent-soft);
}

#foundationMock .app-mock-checklist-row:focus-visible,
#foundationMock .app-mock-record:focus-visible,
#foundationMock .app-mock-list-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

.app-mock-checklist-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--text-subtle);
}

.app-mock-checklist-status svg {
  width: 16px;
  height: 16px;
}

.app-mock-checklist-item.is-done .app-mock-checklist-status {
  color: var(--accent-strong);
}

.app-mock-checklist-item.is-progress .app-mock-checklist-status {
  color: var(--accent-strong);
}

.app-mock-checklist-item.is-pending .app-mock-checklist-status {
  color: var(--text-subtle);
}

.app-mock-checklist-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.app-mock-checklist-label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text);
}

.app-mock-checklist-item.is-done .app-mock-checklist-label {
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--border);
}

.app-mock-checklist-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.app-mock-checklist-chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-subtle);
}

.app-mock-checklist-chev svg {
  width: 8px;
  height: 8px;
}

/* Equipment item cards */

.app-mock-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  padding: 0.7rem 0.95rem 0;
}

.app-mock-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.45rem 0;
}

.app-mock-item-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-radius: 5px;
  flex-shrink: 0;
}

.app-mock-item-icon svg {
  width: 18px;
  height: 18px;
}

.app-mock-item-info {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.app-mock-item-name {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text);
}

.app-mock-item-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* Install Plan summary + file chip strip */

.app-mock-summary-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
  padding: 0.8rem 0.95rem;
}

.app-mock-summary-field {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
}

.app-mock-summary-label {
  font-size: 0.65rem;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.app-mock-summary-value {
  font-size: 0.78rem;
  color: var(--text);
}

.app-mock-file-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.8rem 0.95rem;
}

.app-mock-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.6rem 0.35rem 0.45rem;
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  font-size: 0.72rem;
  color: var(--text-muted);
  background: transparent;
}

.app-mock-file-chip svg {
  width: 11px;
  height: 11px;
  color: var(--text-subtle);
  flex-shrink: 0;
}

.app-mock-file-chip strong {
  color: var(--text);
  font-weight: 500;
}

/* Records (Site Inspection) — labeled sections without sub-cards */

.app-mock-records {
  display: flex;
  flex-direction: column;
}

.app-mock-record {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.85rem 0.95rem;
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  color: inherit;
  width: 100%;
  box-sizing: border-box;
}

button.app-mock-record {
  cursor: pointer;
}

button.app-mock-record:hover {
  background: var(--accent-soft);
}

button.app-mock-list-row {
  background: transparent;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
}

button.app-mock-list-row:hover {
  background: var(--accent-soft);
}

.app-mock-record + .app-mock-record {
  border-top: 1px solid var(--border-soft);
}

.app-mock-record-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.app-mock-record-title {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text);
}

.app-mock-record-byline {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.app-mock-record-detail {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 0.5rem;
  align-items: start;
  margin-top: 0.15rem;
}

.app-mock-record-detail-label {
  font-size: 0.65rem;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  padding-top: 0.12rem;
}

.app-mock-record-detail-value {
  font-size: 0.78rem;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.app-mock-record-detail-value strong {
  color: var(--accent-strong);
  font-weight: 600;
}

.app-mock-note-text {
  font-size: 0.78rem;
  color: var(--text);
  line-height: 1.5;
}

.app-mock-note {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 0.95rem;
  align-items: start;
}

.app-mock-note-author {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.app-mock-note-author-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  line-height: 1.2;
}

.app-mock-note-author-name {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.app-mock-note-author-time {
  font-size: 0.7rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.app-mock-card-body {
  padding: 0.9rem 0.95rem;
}

/* Two-column detail card grid */

.app-mock-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.85rem 1.2rem;
}

.app-mock-detail-field {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
}

.app-mock-detail-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
  font-weight: 600;
}

.app-mock-detail-value {
  font-size: 0.82rem;
  color: var(--text);
  font-weight: 500;
}

.app-mock-detail-value--muted {
  color: var(--text-muted);
  font-weight: 400;
}

/* Team cards grid (Overview tab) */

.app-mock-team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.app-mock-team-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.85rem 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
}

.app-mock-team-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

.app-mock-team-card-name {
  font-size: 0.92rem;
  font-weight: 600;
  margin: 0;
  color: var(--text);
}

.app-mock-team-card-actions {
  display: inline-flex;
  gap: 0.25rem;
}

.app-mock-team-card-stats {
  display: flex;
  gap: 1.2rem;
}

.app-mock-team-card-stat {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}

.app-mock-team-card-stat-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.app-mock-team-card-stat-label {
  font-size: 0.66rem;
  color: var(--text-muted);
}

.app-mock-team-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  font-size: 0.7rem;
  color: var(--text-subtle);
}

/* Activity feed */

.app-mock-activity {
  list-style: none;
  margin: 0;
  padding: 0;
}

.app-mock-activity-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.45rem 0;
  font-size: 0.78rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border-soft);
}

.app-mock-activity-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.app-mock-activity-time {
  font-size: 0.66rem;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.app-mock-activity-text strong {
  color: var(--text);
  font-weight: 600;
}

/* Subform table inside per-team tabs */

.app-mock-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.app-mock-list-row {
  display: grid;
  gap: 0.6rem;
  align-items: center;
  padding: 0.55rem 0.95rem;
  font-size: 0.78rem;
  border-top: 1px solid var(--border-soft);
  min-width: 0;
}

.app-mock-list-row:first-child {
  border-top: 0;
}

.app-mock-list-row--head {
  background: var(--bg-alt);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-subtle);
  font-weight: 600;
  padding: 0.45rem 0.95rem;
}

.app-mock-list-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.app-mock-list-cell--meta {
  color: var(--text-muted);
}

.app-mock-list-cell--right {
  text-align: right;
}

.app-mock-row-actions {
  display: inline-flex;
  gap: 0.2rem;
  flex-shrink: 0;
}

/* KPI strip (Sales tab) */

.app-mock-kpi-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}

.app-mock-kpi {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.app-mock-kpi-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.app-mock-kpi-value {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.app-mock-kpi-meta {
  font-size: 0.72rem;
  color: var(--text-subtle);
}

/* Asset grid (Marketing tab) */

.app-mock-asset-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
}

.app-mock-asset {
  background: var(--bg-tinted);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.app-mock-asset--add {
  background: transparent;
  border-style: dashed;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-subtle);
  font-family: inherit;
  padding: 0;
}

.app-mock-asset--add:hover {
  border-color: var(--accent-strong);
  color: var(--accent-strong);
}

.app-mock-asset--add svg {
  width: 26px;
  height: 26px;
}

.app-mock-asset-thumb {
  position: relative;
  aspect-ratio: 3 / 1.2;
  background: var(--accent-soft);
  color: var(--accent-strong);
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-mock-asset-thumb--image {
  background: var(--accent-tint);
  color: var(--accent-strong);
}

.app-mock-asset-thumb--archive {
  background: var(--code-bg);
  color: var(--text-muted);
}

.app-mock-asset-thumb-glyph {
  width: 56%;
  height: 60%;
}

.app-mock-asset-thumb-tag {
  position: absolute;
  top: 0.3rem;
  left: 0.3rem;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--card);
  color: var(--text);
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  border: 1px solid var(--border-soft);
}

.app-mock-asset-info {
  padding: 0.45rem 0.55rem 0.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  flex: 1;
}

.app-mock-asset-name {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-mock-asset-meta {
  font-size: 0.66rem;
  color: var(--text-subtle);
}

.app-mock-asset > .launch-mock-status {
  margin: 0 0.55rem 0.5rem;
  align-self: flex-start;
}

/* Program featured (Customer Service tab) */

.app-mock-program-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem 1.6rem;
  align-items: center;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 0.85rem;
}

.app-mock-program-meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.app-mock-program-meta-label {
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.app-mock-program-meta-value {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text);
}

.app-mock-progress {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.app-mock-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.78rem;
}

.app-mock-progress-label {
  font-weight: 600;
  color: var(--text);
}

.app-mock-progress-value {
  color: var(--text-muted);
  font-weight: 500;
}

.app-mock-progress-track {
  height: 6px;
  background: var(--bg-tinted);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  overflow: hidden;
}

.app-mock-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}

.app-mock-modules {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.app-mock-modules-head {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.app-mock-modules-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.app-mock-module {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.55rem;
  border-radius: 4px;
  font-size: 0.8rem;
}

.app-mock-module + .app-mock-module {
  border-top: 1px solid var(--border-soft);
  border-radius: 0;
}

.app-mock-module-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  flex-shrink: 0;
  color: transparent;
}

.app-mock-module-check svg {
  width: 12px;
  height: 12px;
}

.app-mock-module.is-complete .app-mock-module-check {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}

.app-mock-module.is-progress .app-mock-module-check {
  border-color: var(--accent);
  color: var(--accent);
}

.app-mock-module-name {
  color: var(--text);
  font-weight: 500;
  flex: 1;
}

.app-mock-module.is-complete .app-mock-module-name {
  color: var(--text-muted);
}

.app-mock-module-meta {
  font-size: 0.72rem;
  color: var(--text-subtle);
  flex-shrink: 0;
}

/* Region grid (Field Service tab) */

.app-mock-region-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

.app-mock-region {
  background: var(--bg-tinted);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 0.7rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.app-mock-region-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.app-mock-region-name {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.app-mock-region-partner {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
}

.app-mock-region-meta {
  font-size: 0.72rem;
  color: var(--text-subtle);
}

/* Responsive */

@media (max-width: 720px) {
  .app-mock-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .app-mock-sidenav {
    border-right: 0;
    border-bottom: 1px solid var(--border-soft);
  }
  .app-mock-team-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .app-mock-kpi-strip {
    grid-template-columns: minmax(0, 1fr);
  }
  .app-mock-asset-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .app-mock-region-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .app-mock-asset-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Modal-over-dashboard panel mock */

.editor-mock--modal .editor-mock-body {
  display: grid;
  grid-template-areas: "stack";
  grid-template-columns: minmax(0, 1fr);
  background: var(--bg-tinted);
}

.editor-mock--page-form .editor-mock-body {
  grid-template-columns: minmax(0, 1fr);
  background-color: var(--bg-tinted);
  background-image: radial-gradient(var(--border-soft) 1px, transparent 1.2px);
  background-size: 14px 14px;
  background-position: 4px 4px;
}

.editor-mock--page-form {
  overflow: visible;
}

.editor-mock--page-form .app-mock-card {
  overflow: visible;
}

.page-form-mock {
  padding: 1.1rem 1.2rem;
  background: var(--bg-tinted);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  font-family: 'Inter', sans-serif;
  color: var(--text);
  overflow: visible;
}

.editor-mock--page-form .app-mock-card {
  border-radius: 6px;
  border-color: var(--border-soft);
  box-shadow: var(--shadow-xs);
}

.editor-mock--page-form .app-mock-card-head {
  padding: 0.55rem 0.95rem;
  background: transparent;
  border-bottom: 1px solid var(--border-soft);
}

.editor-mock--page-form .app-mock-card-title {
  font-size: 0.85rem;
  font-weight: 700;
}

.editor-mock--page-form .app-mock-card-body {
  padding: 0.8rem 0.95rem;
}

.editor-mock--page-form .form-mock {
  padding: 0;
  background: transparent;
}

.editor-mock--page-form .app-mock-page-meta {
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border-soft);
}

.editor-mock--page-form .form-mock-fieldset,
#foundationMock .form-mock-fieldset {
  border-color: var(--accent-strong);
}

.editor-mock--page-form .form-mock-subtable-title {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.editor-mock--page-form .form-mock-subtable-meta {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--text-subtle);
  margin-left: 0.4rem;
}

.editor-mock--page-form .form-mock-subtable-title .launch-mock-subform-add {
  margin: 0;
  padding: 0.3rem 0.45rem;
  border: 0;
  background: transparent;
}

.form-mock-subtable-edit {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--accent-strong);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.3rem 0.45rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: inherit;
  cursor: pointer;
  margin: 0;
}

.form-mock-subtable-edit svg {
  width: 12px;
  height: 12px;
}

.editor-mock--page-form .perm-mock-titlebar-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.editor-mock--page-form button,
.editor-mock--page-form a,
.editor-mock--page-form .perm-mock-back,
.editor-mock--page-form .perm-mock-meta-link {
  cursor: text;
  user-select: text;
}

.editor-mock--page-form a.perm-mock-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.editor-mock--page-form a.perm-mock-save:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--accent-text);
}

.editor-mock--page-form a.perm-mock-save:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.editor-mock--page-form .hero-mock-navbtn.is-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}

.editor-mock--page-form .hero-mock-steps {
  margin-bottom: 0;
}

.editor-mock--page-form .form-mock-context-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.editor-mock--page-form .form-mock-context-item {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  padding: 0.5rem 0.7rem;
  background: var(--card);
  border-radius: 4px;
  border-left: 2px solid var(--accent-border);
}

.editor-mock--page-form .form-mock-context-label {
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.editor-mock--page-form .form-mock-context-value {
  font-size: 0.78rem;
  color: var(--text);
  line-height: 1.35;
}

.editor-mock--page-form .form-mock-context-meta {
  font-size: 0.7rem;
  color: var(--text-subtle);
}

.editor-mock--page-form .install-plan-readonly {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.08rem;
  min-height: 2.25rem;
}

.editor-mock--page-form .install-plan-readonly .hero-mock-readonly-value {
  padding: 0;
  line-height: 1.25;
}

.form-mock-stakeholders {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
}

.form-mock-stakeholder {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.form-mock-stakeholder-avatar {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.66rem;
  font-weight: 700;
  flex-shrink: 0;
  border: 1px solid var(--accent-border);
}

.form-mock-stakeholder-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.form-mock-stakeholder-name {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.form-mock-stakeholder-role {
  font-size: 0.66rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.form-mock-field-hint {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 0.18rem;
}

.form-mock-field.is-disabled .form-mock-segmented {
  background: var(--bg-tinted);
  border-color: var(--border-soft);
  color: var(--text-subtle);
}

.form-mock-field.is-disabled .form-mock-segmented span {
  border-right-color: var(--border-soft);
}

.form-mock-field.is-disabled .form-mock-segmented span.is-active {
  background: var(--border);
  color: var(--text-muted);
}

.form-mock-computed {
  font-size: 0.74rem;
  color: var(--text-muted);
  display: block;
}

.form-mock-computed strong {
  color: var(--text);
  font-weight: 600;
}

.form-mock-validation {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: 4px;
  color: var(--warn-color);
  font-size: 0.74rem;
  line-height: 1.4;
}

.form-mock-validation-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 0.05rem;
}

.editor-mock--page-form .form-mock-label {
  font-size: 0.7rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
  font-weight: 500;
}

.editor-mock--page-form .form-mock-checkbox-group-label,
#foundationMock .form-mock-checkbox-group-label {
  font-size: 0.7rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
  font-weight: 500;
}

.editor-mock--page-form .form-mock-input {
  padding: 0.45rem 0.6rem;
  border-radius: 4px;
}

.editor-mock--page-form .form-mock-input-icon-btn {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-text);
}

.editor-mock--page-form .launch-mock-subform {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.editor-mock--page-form .launch-mock-subform-head,
.editor-mock--page-form .launch-mock-subform-row {
  padding: 0;
}

.editor-mock--page-form .launch-mock-subform-head > span,
.editor-mock--page-form .launch-mock-subform-cell {
  padding: 0;
}

.editor-mock--page-form .launch-mock-subform-row .app-mock-card-icon-btn {
  border: 0;
}

.editor-mock--page-form .launch-mock-subform-head {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  border-bottom: 0;
  margin-bottom: -0.2rem;
}

.editor-mock--page-form .launch-mock-subform-row {
  background: transparent;
  border: 0;
  border-radius: 0;
}

.editor-mock--page-form .launch-mock-subform-row + .launch-mock-subform-row {
  border-top: 0;
}

.editor-mock--page-form .launch-mock-subform-cell .form-mock-input {
  padding: 0.3rem 0.45rem;
  font-size: 0.74rem;
}

.editor-mock--page-form .launch-mock-subform-cell .form-mock-segmented {
  font-size: 0.7rem;
}

.editor-mock--page-form .launch-mock-subform-cell .form-mock-segmented span {
  padding: 0.25rem 0.3rem;
}

.editor-mock--page-form .launch-mock-status {
  padding: 0.16rem 0.55rem;
  font-size: 0.68rem;
}

.editor-mock--page-form .launch-mock-status::before {
  display: none;
}

.editor-mock--page-form .launch-mock-status--ready {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border: 1px solid var(--accent-border);
}

.editor-mock--page-form .launch-mock-subform-add {
  margin: 0;
  padding: 0.38rem 0.55rem;
  border-top: 1px solid var(--border-soft);
}

.editor-mock--page-form .modal-mock-foot-hint {
  margin-top: 0.05rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--border-soft);
}

.panel-mock-stage-bg {
  grid-area: stack;
  align-self: start;
  padding: 1rem 1.2rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-family: 'Inter', sans-serif;
  color: var(--text);
}

.panel-mock-stage-header {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.panel-mock-stage-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.005em;
  margin: 0;
}

.panel-mock-stage-meta {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.modal-mock-layer {
  grid-area: stack;
  background: color-mix(in srgb, var(--bg) 32%, transparent);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 3.6rem 0.5rem 1.2rem;
}

.modal-mock {
  width: calc(100% - 0.4rem);
  max-width: 660px;
  border: 1px solid var(--accent-border);
  background: var(--card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
}

.modal-mock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.6rem 0.85rem;
  background: var(--accent);
  color: var(--accent-text);
}

.modal-mock-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--accent-text);
}

.modal-mock-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.modal-mock-body {
  padding: 0.9rem 0.95rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.modal-mock-foot {
  padding: 0.55rem 0.95rem;
  border-top: 1px solid var(--border-soft);
  background: var(--bg-tinted);
}

.modal-mock-foot-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.modal-mock-btn {
  border-radius: 6px;
  padding: 0.36rem 0.7rem;
  font-size: 0.76rem;
  font-weight: 600;
  font-family: inherit;
}

.modal-mock-btn--white {
  border: 1px solid var(--accent-strong);
  background: var(--card);
  color: var(--accent-strong);
}

.modal-mock-btn--outline {
  border: 1px solid var(--accent-strong);
  background: transparent;
  color: var(--accent-strong);
}

.form-mock-conditional {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-radius: 999px;
  vertical-align: middle;
}

.modal-mock-reactive {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.5rem 0.65rem;
  background: var(--accent-soft);
  border: 1px dashed var(--accent-border);
  border-radius: var(--radius-md);
  font-size: 0.75rem;
}

.modal-mock-reactive-label {
  font-weight: 700;
  color: var(--accent-strong);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.62rem;
  flex-shrink: 0;
}

.modal-mock-reactive-value {
  color: var(--text);
}

.editor-mock {
  isolation: isolate;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  font-size: 0.8rem;
}

.editor-mock-bar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-alt);
  position: relative;
  z-index: 40;
}

.editor-mock-bar-dots {
  display: none;
}

.editor-mock-bar-title {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.01em;
  font-weight: 600;
  color: var(--text-muted);
}

.editor-mock-bar-user {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

.editor-mock-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 188px;
}

.editor-mock--schema .editor-mock-body,
.editor-mock--flow .editor-mock-body {
  background-color: var(--bg-tinted);
  background-image: radial-gradient(var(--border-soft) 1px, transparent 1.2px);
  background-size: 14px 14px;
  background-position: 4px 4px;
}

.editor-mock-canvas {
  position: relative;
  aspect-ratio: 4 / 4;
  overflow: hidden;
}

.editor-mock-edge {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--accent);
  pointer-events: none;
}

.editor-mock-node {
  position: absolute;
  width: 40%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  box-sizing: border-box;
}

.editor-mock-node.is-selected {
  border-color: var(--accent);
  border-width: 2px;
  box-shadow:
    0 0 0 3px var(--accent-soft),
    0 12px 28px var(--accent-glow),
    0 4px 10px rgba(var(--shadow-color), 0.15);
  z-index: 2;
}

.editor-mock-node-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.55rem;
  background: var(--accent);
  color: var(--accent-text);
  border-bottom: 1px solid var(--accent);
  font-size: 0.78rem;
  font-weight: 550;
}

.editor-mock-node-icon {
  width: 11px;
  height: 11px;
  color: var(--accent-text);
  flex-shrink: 0;
}

.editor-mock-node-rows {
  list-style: none;
  margin: 0;
  padding: 0.2rem 0;
}

.editor-mock-node-rows li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 0.35rem;
  align-items: center;
  padding: 0.16rem 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--text);
}

.editor-mock-node-rows .key {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-subtle);
}

.editor-mock-node-rows .type {
  color: var(--text-subtle);
  font-size: 0.62rem;
}

.editor-mock-node-more {
  padding: 0.3rem 0.55rem 0.4rem 0.55rem;
  font-size: 0.66rem;
  color: var(--text-muted);
  border-top: 1px dashed var(--border-soft);
}

/* Flow editor — action nodes */

.editor-mock-flow-node {
  position: absolute;
  width: 41%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow-sm);
  padding: 0.5rem 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 550;
  color: var(--text);
  box-sizing: border-box;
}

.editor-mock-flow-node.is-selected {
  border-color: var(--accent);
  border-width: 2px;
  box-shadow:
    0 0 0 3px var(--accent-soft),
    0 12px 28px var(--accent-glow),
    0 4px 10px rgba(var(--shadow-color), 0.15);
  z-index: 2;
}

.editor-mock-flow-node-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--accent-strong);
}

.editor-mock-flow-node-content {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  line-height: 1.2;
}

.editor-mock-flow-node-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.editor-mock-flow-node-subtitle {
  font-size: 0.62rem;
  color: var(--text-subtle);
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-mock-edge-label {
  font-size: 10.5px;
  font-weight: 700;
  fill: var(--accent-strong);
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.02em;
}

.editor-mock-flow-area {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.editor-mock-flow-disclaimer-bar {
  margin-top: auto;
  padding: 0.55rem 0.85rem;
  font-size: 0.66rem;
  color: var(--text-muted);
  background: var(--card);
  border-top: 1px solid var(--border-soft);
  line-height: 1.45;
}

.editor-mock-panel {
  padding: 0.95rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--card);
  border-left: 1px solid var(--border-soft);
}

.editor-mock-panel-fields {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.editor-mock-panel-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.editor-mock-panel-field-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
}

.editor-mock-panel-field-value {
  padding: 0.38rem 0.55rem;
  border: 1px solid var(--border);
  background: var(--bg-tinted);
  border-radius: var(--radius-sm);
  font-size: 0.74rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-mock-panel-field-value--code {
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.editor-mock-panel-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.editor-mock-panel-section-title {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
  margin-bottom: 0.45rem;
}

.editor-mock-panel-section-header .editor-mock-panel-section-title {
  margin-bottom: 0;
  line-height: 1;
}

.editor-mock-panel-section-title--primary {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--accent-strong);
  font-weight: 700;
}

.editor-mock-panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.editor-mock-panel-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.4rem;
  padding: 0.18rem 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text);
}

.editor-mock-panel-list--idx li {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem;
}
.editor-mock-panel-list--cols {
  gap: 0;
}

.editor-mock-panel-list--children li {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.4rem;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--text);
}

.editor-mock-panel-list--actions li {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--text);
  padding: 0.08rem 0;
}

.editor-mock-panel-list--steps li {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.5rem;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--text);
  padding: 0.28rem 0;
}

.editor-mock-flow-step-icon {
  width: 14px;
  height: 14px;
  color: var(--text-subtle);
  flex-shrink: 0;
}

.editor-mock-panel-list--steps li.is-async .editor-mock-flow-step-icon {
  color: var(--accent-strong);
}

.editor-mock-flow-step-content {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
  line-height: 1.2;
}

.editor-mock-flow-step-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.editor-mock-flow-step-subtitle {
  font-size: 0.62rem;
  color: var(--text-subtle);
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-mock-flow-step-subtitle--code {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--text-muted);
}

.editor-mock-flow-step-verb {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-right: 0.15rem;
}

.editor-mock-flow-step-meta {
  font-size: 0.66rem;
  color: var(--text-subtle);
  font-weight: 400;
  margin-left: 0.15rem;
}

.editor-mock-flow-step-async {
  width: 11px;
  height: 13px;
  color: var(--accent-strong);
  margin-left: 0.3rem;
  vertical-align: -2px;
  flex-shrink: 0;
  display: inline-block;
}

.editor-mock-panel-dropdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.38rem 0.55rem;
  border: 1px solid var(--border);
  background: var(--bg-tinted);
  border-radius: var(--radius-sm);
  font-size: 0.74rem;
  color: var(--text);
}

.editor-mock-panel-dropdown svg {
  width: 10px;
  height: 10px;
  color: var(--text-subtle);
  flex-shrink: 0;
}

.editor-mock-panel-dropdown > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.editor-mock-panel-notes {
  padding: 0.42rem 0.55rem;
  border: 1px solid var(--border);
  background: var(--bg-tinted);
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  color: var(--text-muted);
  line-height: 1.45;
  min-height: 3.4em;
}

.editor-mock-panel-list .dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--border-strong);
  justify-self: center;
}

.editor-mock-panel-list .type.is-pk { 
  color: var(--accent-strong); 
  font-weight: 550;
}
.editor-mock-panel-list .dot.is-fk {
  background: transparent;
  border: 1.5px solid var(--accent-strong);
}

.editor-mock-panel-list .col {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-mock-panel-list .col .ix-unique {
  color: var(--accent-strong)
}

.editor-mock-panel-list .type {
  font-size: 0.62rem;
  color: var(--text-subtle);
}

.editor-mock-edit {
  background: none;
  border: 0;
  padding: 0.18rem;
  margin: -0.18rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-strong);
  border-radius: 4px;
}

.editor-mock-edit svg {
  width: 11px;
  height: 11px;
  display: block;
}

.editor-mock-add {
  background: none;
  border: 0;
  padding: 0.1rem 0.35rem;
  margin: -0.1rem -0.35rem;
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  color: var(--accent-strong);
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 4px;
}

.editor-mock-add::before {
  content: "+";
  font-size: 0.85rem;
  line-height: 0.7;
  font-weight: 500;
}

.editor-mock-add--minus::before {
  content: "−";
}

/* Toggle widget for boolean panel options */

.editor-mock-toggle {
  display: inline-flex;
  align-items: center;
  width: 26px;
  height: 14px;
  background: var(--border);
  border-radius: 999px;
  padding: 2px;
  flex-shrink: 0;
  transition: background 0.15s;
}

.editor-mock-toggle-thumb {
  width: 10px;
  height: 10px;
  background: var(--card);
  border-radius: 999px;
  transition: transform 0.15s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.editor-mock-toggle.is-on {
  background: var(--accent);
}

.editor-mock-toggle.is-on .editor-mock-toggle-thumb {
  transform: translateX(12px);
}

.editor-mock-panel-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.22rem 0;
}

.editor-mock-panel-toggle-row + .editor-mock-panel-toggle-row {
  margin-top: -0.4rem;
}

.editor-mock-panel-toggle-label {
  font-size: 0.74rem;
  color: var(--text);
  font-weight: 500;
}

.editor-mock-panel-segmented {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--card);
  font-size: 0.62rem;
  flex-shrink: 0;
}

.editor-mock-panel-segmented > span {
  padding: 0.15rem 0.45rem;
  color: var(--text-muted);
  border-right: 1px solid var(--border);
  font-weight: 500;
}

.editor-mock-panel-segmented > span:last-child {
  border-right: none;
}

.editor-mock-panel-segmented > span.is-active {
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
}

.editor-mock-panel-segmented > span.is-fx {
  font-family: var(--font-mono);
  font-style: italic;
}

/* Read-only attribute display (e.g. database binding) */

.editor-mock-panel-lock {
  width: 11px;
  height: 11px;
  color: var(--text-subtle);
  flex-shrink: 0;
}

.editor-mock-panel-binding-header {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.45rem;
}

.editor-mock-panel-binding-header .editor-mock-panel-section-title {
  margin-bottom: 0;
}

.editor-mock-panel-binding-row {
  font-size: 0.7rem;
  line-height: 1.5;
}

.editor-mock-panel-binding-row + .editor-mock-panel-binding-row {
  margin-top: 0.4rem;
}

.editor-mock-panel-binding-label {
  color: var(--text);
  font-weight: 600;
}

.editor-mock-panel-binding-label::after {
  content: ":";
  margin-right: 0.3rem;
}

.editor-mock-panel-binding-row .col,
.editor-mock-panel-binding-row .editor-mock-panel-binding-table {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 500;
}

.editor-mock-panel-binding-row .ref {
  display: block;
  font-size: 0.64rem;
  color: var(--text-subtle);
}

.editor-mock-panel-section hr {
  margin: 0.7rem 0;
  border: 0;
  border-top: 1px solid var(--border-soft);
}

.editor-mock-panel-binding-card {
  padding: 0.5rem;
  background: var(--bg-tinted);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
}

/* Form preview mock (Pillar 2: page editor) */

.form-mock {
  padding: 1.1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  background: var(--bg-tinted);
}

.form-mock-section-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--border-soft);
}

.form-mock-field {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  position: relative;
  border-radius: 4px;
}

.form-mock-field.is-selected {
  outline: 2px solid var(--accent);
  outline-offset: 5px;
}

.form-mock-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 500;
}

.form-mock-required {
  color: var(--accent-strong);
  margin-left: 0.18rem;
}

.form-mock-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--card);
  font-size: 0.78rem;
  color: var(--text);
}

.form-mock-input > span {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.form-mock-input--placeholder {
  color: var(--text-subtle);
  font-weight: 400;
}

.form-mock-input--multi {
  align-items: flex-start;
  min-height: 50px;
  font-size: 0.74rem;
  line-height: 1.45;
}

.form-mock-icon {
  width: 12px;
  height: 12px;
  color: var(--text-subtle);
  flex-shrink: 0;
}

.form-mock-row {
  display: flex;
  gap: 0.6rem;
}

.form-mock-row .form-mock-field {
  flex: 1;
  min-width: 0;
}

.form-mock-input-row {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
}

.form-mock-input-row .form-mock-input {
  flex: 1;
  min-width: 0;
}

.form-mock-input-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.6rem;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: var(--accent);
  color: var(--accent-text);
  flex-shrink: 0;
}

.form-mock-input-action svg {
  width: 14px;
  height: 14px;
}

.form-mock-fieldset {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0;
  padding: 0.5rem 0.85rem 0.85rem;
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  min-width: 0;
}

.form-mock-fieldset-label {
  padding: 0 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.form-mock-stacked {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
}

.form-mock-stacked-inputs {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.form-mock-segmented {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--card);
  font-size: 0.74rem;
}

.form-mock-segmented span {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  padding: 0.4rem 0.3rem;
  color: var(--text-muted);
  border-right: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.form-mock-segmented span:last-child {
  border-right: none;
}

.form-mock-segmented span.is-active {
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
}

.form-mock-checkboxes {
  display: flex;
  flex-direction: row;
  gap: 0.4rem;
  align-self: end;
}

.form-mock-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.74rem;
  color: var(--text);
  min-width: 0;
}

.form-mock-checkbox > span:last-child {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.form-mock-checkbox-box {
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--border);
  border-radius: 3px;
  background: var(--card);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.form-mock-checkbox-box.is-checked {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}

.form-mock-checkbox-box.is-indeterminate {
  background: var(--warn-bg);
  border-color: var(--warn-border);
  color: var(--warn-color);
}

.form-mock-checkbox-box svg {
  width: 9px;
  height: 9px;
}

.form-mock-checkbox-box:not(.is-checked):not(.is-indeterminate) svg {
  display: none;
}

/* Mock radio box — circular twin of .form-mock-checkbox-box. Same size and
   ring; .is-checked carves a centered dot via inset box-shadow so the visual
   matches the radios on the home hero mock + Features explorer. */
.form-mock-radio-box {
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
}

.form-mock-radio-box.is-checked {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: inset 0 0 0 2.5px var(--card);
}

/* Expression editor mock (Pillar 3) */

.expr-mock {
  padding: 1rem 1.1rem;
  background: var(--bg-tinted);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text);
  min-width: 0;
}

.expr-mock-helper,
.query-mock-helper {
  font-family: 'Inter', sans-serif;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--text-muted);
  padding: 0.5rem 0.7rem;
  background: var(--card);
  border-left: 2px solid var(--accent-strong);
  border-radius: 0 4px 4px 0;
  margin-bottom: 0.15rem;
}

.expr-mock-helper strong,
.query-mock-helper strong {
  color: var(--text);
  font-weight: 600;
}

.expr-mock-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.expr-mock-section-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
  font-weight: 600;
}

.expr-mock-fn {
  color: var(--accent-strong);
  font-weight: 500;
}

.expr-mock-bool {
  color: var(--accent-strong);
  font-weight: 500;
}

.expr-mock-statement {
  display: flex;
  align-items: flex-start;
  gap: 0.3rem;
  min-width: 0;
}

.expr-mock-target {
  background: var(--bg-tinted);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  padding: 0.25rem 0.3rem;
  color: var(--text);
  font-weight: 500;
  flex-shrink: 0;
}

.expr-mock-equals {
  color: var(--text-muted);
  font-weight: 600;
  align-self: center;
  flex-shrink: 0;
}

.expr-mock-keyword {
  color: var(--accent-strong);
  font-weight: 700;
  font-size: 0.74rem;
  flex-shrink: 0;
  padding-top: 0.55rem;
}

.mock-divider {
  border-top: 1px solid var(--border-soft);
  margin: 0.1rem 0;
}

.expr-mock-expr {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex: 1;
  min-width: 0;
  padding: 0.18rem 0.3rem;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
}

.expr-mock-dots {
  color: var(--text-subtle);
  font-size: 1rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
  flex-shrink: 0;
  user-select: none;
}

.expr-mock-input {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  padding: 0.18rem 0.45rem;
  background: var(--bg-tinted);
  border: 1px solid var(--border-soft);
  border-radius: 3px;
}

.expr-mock-code {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

.expr-mock-dropdown-icon {
  width: 10px;
  height: 10px;
  color: var(--text-subtle);
  flex-shrink: 0;
  margin-left: 0.25rem;
}

.expr-mock-num {
  color: var(--accent);
  font-weight: 500;
}

.expr-mock-str {
  color: var(--accent-strong);
  font-weight: 500;
}

.expr-mock-error {
  text-decoration: underline wavy var(--accent-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.expr-mock-conditional {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.45rem;
  background: var(--bg-tinted);
  border: 1px solid color-mix(in srgb, var(--border-soft) 50%, transparent);
  border-radius: 4px;
  min-width: 0;
}

.expr-mock-cond-row {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  min-width: 0;
}

.expr-mock-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.18rem 0.45rem;
  border-radius: 3px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  flex-shrink: 0;
  min-width: 2.8rem;
  margin-top: 0.15rem;
}

.expr-mock-pill--label {
  background: transparent;
  color: var(--text-muted);
}

.expr-mock-comparison {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.4rem;
  background: var(--bg-tinted);
  border: 1px solid color-mix(in srgb, var(--border-soft) 50%, transparent);
  border-radius: 4px;
  min-width: 0;
}

.expr-mock-comp-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.expr-mock-comp-row .expr-mock-pill {
  margin-top: 0;
}

/* Signature card (input/output types) */

.expr-mock-signature {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.55rem 0.7rem;
  background: var(--bg-tinted);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
}

.expr-mock-signature-row {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
}

.expr-mock-signature-label {
  color: var(--text);
  font-weight: 600;
}

.expr-mock-signature-value {
  color: var(--text-muted);
}

.expr-mock-signature-value code {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--accent-strong);
  font-weight: 500;
  background: var(--card);
  padding: 0.05rem 0.32rem;
  border-radius: 3px;
}

.expr-mock-signature-kind {
  font-size: 0.62rem;
  color: var(--text-subtle);
  margin-left: 0.15rem;
}

/* Description input */

.expr-mock-description {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text);
  padding: 0.5rem 0.65rem;
  background: var(--bg-tinted);
  border: 1px solid var(--border);
  border-radius: 4px;
}

/* Validation panel */

.expr-mock-status {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-strong);
  line-height: 1;
}

.expr-mock-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--accent-strong);
  color: var(--accent-text);
  font-size: 0.55rem;
  font-weight: 700;
}

.expr-mock-issues {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-top: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.expr-mock-issue {
  font-size: 0.66rem;
  line-height: 1.45;
}

.expr-mock-issue-loc {
  font-size: 0.66rem;
  color: var(--text-muted);
  margin-bottom: 0.22rem;
  font-weight: 600;
}

.expr-mock-issue-loc code {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--text);
}

.expr-mock-issue-msg {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--accent-strong);
  font-weight: 500;
}

.expr-mock-issue-hint {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-muted);
  margin-top: 0.18rem;
}

/* Product Launch mock (Features page) — tabbed multi-team form */

.editor-mock--launch .editor-mock-body,
.editor-mock--launch-bulk .editor-mock-body,
.editor-mock--launch-actions .editor-mock-body {
  grid-template-columns: minmax(0, 1fr);
}

.editor-mock--launch-nav .editor-mock-body {
  grid-template-columns: 160px minmax(0, 1fr);
}

.launch-mock {
  background: var(--bg-tinted);
  display: flex;
  flex-direction: column;
  font-family: 'Inter', sans-serif;
  color: var(--text);
  min-width: 0;
}

.launch-mock-tabs {
  display: flex;
  align-items: stretch;
  gap: 0.05rem;
  padding: 0 0.95rem;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  overflow-x: auto;
  scrollbar-width: none;
}

.launch-mock-tabs::-webkit-scrollbar {
  display: none;
}

.launch-mock-tab {
  padding: 0.7rem 0.85rem;
  font-size: 0.74rem;
  color: var(--text-muted);
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  flex-shrink: 0;
}

.launch-mock-tab.is-active {
  color: var(--text);
  font-weight: 600;
  border-bottom-color: var(--accent);
}

.launch-mock-body {
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
}

.launch-mock-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: -0.15rem;
}

.launch-mock-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.launch-mock-meta {
  font-size: 0.66rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.launch-mock-save {
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
  font-size: 0.72rem;
  padding: 0.42rem 0.6rem;
  border-radius: 5px;
  border: 0;
  flex-shrink: 0;
  white-space: nowrap;
  font-family: inherit;
}

/* Calculated indicators strip (Reactive panel) */

.launch-mock-indicators {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.1rem;
}

.launch-mock-indicator {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.5rem 0.65rem;
  min-width: 0;
}

.launch-mock-indicator-label {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
  font-weight: 600;
  display: block;
  margin-bottom: 0.18rem;
}

.launch-mock-indicator-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.launch-mock-indicator-meta {
  font-size: 0.62rem;
  color: var(--text-muted);
  margin-left: 0.3rem;
  font-weight: 500;
}

.launch-mock-indicator-value--accent {
  color: var(--accent-strong);
}

/* Subform table (master-detail, junction) */

.launch-mock-subform {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.launch-mock-subform-head,
.launch-mock-subform-row {
  display: grid;
  gap: 0.5rem;
  align-items: center;
  padding: 0 0.45rem;
  min-width: 0;
}

.launch-mock-subform-head {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-subtle);
  font-weight: 600;
  padding-bottom: 0.32rem;
  border-bottom: 1px solid var(--border-soft);
}

.launch-mock-subform-row {
  padding: 0.4rem 0.45rem;
  font-size: 0.74rem;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.launch-mock-subform-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.launch-mock-subform-cell--mono {
  font-family: var(--font-mono);
  font-size: 0.7rem;
}

.launch-mock-subform-cell--right {
  text-align: right;
}

.launch-mock-subform-cell--meta {
  color: var(--text-muted);
  font-size: 0.7rem;
}

.launch-mock-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
}

.launch-mock-row-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-subtle);
  border-radius: 3px;
}

.launch-mock-row-action-btn svg {
  width: 11px;
  height: 11px;
}

.launch-mock-subform-add {
  align-self: flex-start;
  background: none;
  border: 0;
  color: var(--accent-strong);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.32rem 0.45rem;
  margin: 0.2rem 0 0 -0.45rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: inherit;
}

.launch-mock-subform-add::before {
  content: "+";
  font-size: 0.95rem;
  line-height: 0.6;
  font-weight: 500;
}

/* Status pills used inside subforms */

.launch-mock-status {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 600;
  white-space: nowrap;
}

.launch-mock-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  flex-shrink: 0;
}

.launch-mock-status--ready {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border: 1px solid var(--accent-border);
}

.launch-mock-status--progress {
  background: var(--bg-tinted);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.launch-mock-status--blocked {
  background: var(--warn-bg);
  color: var(--warn-color);
  border: 1px solid var(--warn-border);
}

/* Lookup field with selected record + view/edit icons */

.form-mock-input-with-actions {
  display: flex;
  align-items: stretch;
  gap: 0.32rem;
}

.form-mock-input-with-actions .form-mock-input {
  flex: 1;
  min-width: 0;
}

.form-mock-input-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 32px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--card);
  color: var(--text-muted);
  flex-shrink: 0;
}

.form-mock-input-icon-btn svg {
  width: 12px;
  height: 12px;
}

/* Lookup dropdown open */

.form-mock-input--open {
  position: relative;
  z-index: 1;
}

.form-mock-input.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.form-mock-caret {
  display: inline-block;
  width: 1.2px;
  height: 1.15em;
  background: currentColor;
  margin-left: 1.1px;
  vertical-align: middle;
}

.form-mock-lookup-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 5px;
  box-shadow: var(--shadow-md);
  z-index: 5;
}

.form-mock-lookup-results {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
  display: flex;
  flex-direction: column;
  max-height: 5.6rem;
  overflow: hidden;
  position: relative;
}

.form-mock-lookup-results::after {
  content: "";
  position: absolute;
  top: 0.4rem;
  right: 0.2rem;
  width: 4px;
  height: 3rem;
  background: var(--text-subtle);
  border-radius: 999px;
  pointer-events: none;
}

.form-mock-lookup-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.42rem 0.7rem;
  font-size: 0.74rem;
  color: var(--text);
}

.form-mock-lookup-result.is-highlighted {
  background: var(--accent-soft);
}

.form-mock-lookup-result-meta {
  font-size: 0.65rem;
  color: var(--text-muted);
}

.form-mock-lookup-divider {
  border-top: 1px solid var(--border-soft);
  margin: 0.2rem 0 0;
}

.form-mock-lookup-actions {
  display: flex;
  gap: 1rem;
  padding: 0.45rem 0.7rem;
  align-items: center;
}

.form-mock-lookup-action {
  font-size: 0.68rem;
  color: var(--accent-strong);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: text;
}

.form-mock-lookup-action svg {
  width: 11px;
  height: 11px;
}

/* Form section heading inside launch tab */

.launch-mock-section-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-subtle);
  font-weight: 600;
  margin-top: 0.2rem;
}

/* Form mock additions for launch panels */

.form-mock-input--readonly {
  background: var(--bg-tinted);
  color: var(--text-muted);
  border-style: dashed;
}

.form-mock-input--text {
  white-space: nowrap;
}

.form-mock-input--textarea {
  min-height: 3.4rem;
  align-items: flex-start;
  padding-top: 0.4rem;
}

/* File upload row inside form-mock */

.form-mock-files {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
}

.form-mock-file {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.55rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.74rem;
}

.form-mock-file-icon {
  width: 14px;
  height: 14px;
  color: var(--accent-strong);
  flex-shrink: 0;
}

.form-mock-file-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.form-mock-file-meta {
  font-size: 0.65rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.form-mock-file-remove {
  background: none;
  border: 0;
  padding: 0.18rem;
  margin: -0.18rem;
  color: var(--text-subtle);
  display: inline-flex;
  align-items: center;
  border-radius: 3px;
}

.form-mock-file-remove svg {
  width: 10px;
  height: 10px;
}

.form-mock-file-add {
  align-self: flex-start;
  background: var(--card);
  border: 1px dashed var(--border);
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.4rem 0.62rem;
  border-radius: 4px;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
}

/* "Beyond the Form" explorer — left table of contents + swapping panel */

.feature-explorer {
  display: grid;
  grid-template-columns: minmax(14rem, 0.72fr) minmax(0, 1.28fr);
  gap: 2.75rem;
  align-items: start;
  margin-top: 2rem;
}

.feature-explorer-nav {
  align-self: start;
}

.feature-explorer-nav-card {
  padding-left: 1rem;
  border-left: 1px solid var(--border-soft);
}

.feature-explorer-nav-label {
  display: inline-block;
  margin-bottom: 0.9rem;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-subtle);
}

.feature-explorer-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.feature-explorer-field + .feature-explorer-field {
  margin-top: 1.25rem;
}

.feature-explorer-field-label {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-subtle);
}

/* Custom outline-style select. Replaces the native <select> on Beyond the
   Form so the trigger matches the outline aesthetic used by the other
   form-control-shaped UIs (segmented controls, form-feature panel, etc.).
   Implements the ARIA combobox pattern (trigger + role=listbox + role=option). */
.custom-select {
  position: relative;
}

.custom-select-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.94rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.custom-select-trigger:hover {
  border-color: color-mix(in srgb, var(--accent-border) 60%, var(--border));
}

.custom-select-trigger:focus-visible {
  outline: none;
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.custom-select-trigger[aria-expanded="true"] {
  border-color: var(--accent);
}

.custom-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-select-chevron {
  width: 0.9rem;
  height: 0.9rem;
  color: var(--text-subtle);
  flex-shrink: 0;
  transition: transform 0.18s ease;
}

.custom-select-trigger[aria-expanded="true"] .custom-select-chevron {
  transform: rotate(180deg);
}

.custom-select-listbox {
  position: absolute;
  bottom: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--card);
  box-shadow: var(--shadow-md);
  animation: custom-select-open 0.14s ease-out;
}

.custom-select-listbox[hidden] {
  display: none;
}

@keyframes custom-select-open {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.custom-select-option {
  padding: 0.55rem 0.7rem;
  border-radius: 6px;
  color: var(--text);
  font-size: 0.92rem;
  cursor: pointer;
  transition: background-color 0.12s ease;
  margin: 0;
}

.custom-select-option:hover,
.custom-select-option:focus {
  outline: none;
  background-color: color-mix(in srgb, var(--bg-tinted) 55%, transparent);
}

.custom-select-option[aria-selected="true"] {
  color: var(--accent-strong);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .custom-select-listbox {
    animation: none;
  }
  .custom-select-chevron {
    transition: none;
  }
}

.feature-explorer-tablist {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.feature-explorer-tab {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.75rem;
  width: 100%;
  padding: 0.7rem 0.9rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  color: var(--text);
  font: inherit;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.feature-explorer-tab[hidden] {
  display: none;
}

.feature-explorer-tab:hover {
  background: color-mix(in srgb, var(--bg-tinted) 60%, var(--card));
}

.feature-explorer-tab.is-active {
  background: var(--accent-soft);
  border-color: var(--accent-border);
}

.feature-explorer-tab:focus-visible {
  outline: none;
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.feature-explorer-tab-radio {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.2rem;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--card);
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: border-color 0.18s ease;
}

.feature-explorer-tab:hover .feature-explorer-tab-radio {
  border-color: var(--text-subtle);
}

.feature-explorer-tab.is-active .feature-explorer-tab-radio {
  border-color: var(--accent);
}

.feature-explorer-tab.is-active .feature-explorer-tab-radio::after {
  content: "";
  position: absolute;
  inset: 0.2rem;
  border-radius: 999px;
  background: var(--accent);
}

.feature-explorer-tab-copy {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
}

.feature-explorer-tab-kicker {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--text-subtle);
}

.feature-explorer-tab.is-active .feature-explorer-tab-kicker {
  color: var(--accent-strong);
}

.feature-explorer-tab-title {
  font-size: 0.97rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--text);
}

.feature-explorer-panels {
  min-width: 0;
}

.feature-explorer-panel[hidden] {
  display: none;
}

.feature-explorer-surface {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 84%, var(--bg-tinted)), color-mix(in srgb, var(--card) 76%, var(--bg-alt)));
  box-shadow: var(--shadow-sm);
}

.feature-explorer-panel-mock {
  padding: 1rem;
  height: 16rem;
  display: flex;
  background: color-mix(in srgb, var(--bg-tinted) 82%, var(--card));
  border-bottom: 1px solid var(--border-soft);
}

.feature-explorer-panel-mock > * {
  width: 100%;
}

.feature-explorer-panel-mock .notif-mock,
.feature-explorer-panel-mock .list-mock,
.feature-explorer-panel-mock .bulk-mock {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

.feature-explorer-mock-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--card) 50%, transparent);
  text-align: center;
  padding: 1rem;
  min-height: 14rem;
}

.feature-explorer-mock-placeholder-label {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88rem;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

.feature-explorer-mock-placeholder-note {
  font-size: 0.66rem;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
}

/* Notifications feed mock — In-app notifications panel inside Beyond-the-form.
   Designed for a fixed 14rem inner space (16rem container minus 1rem padding × 2). */

.feed-mock {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  font-family: 'Inter', sans-serif;
  color: var(--text);
}

.feed-mock-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.85rem;
  background: var(--bg-tinted);
  border-bottom: 1px solid var(--border-soft);
}

.feed-mock-bell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.feed-mock-bell svg {
  width: 100%;
  height: 100%;
}

.feed-mock-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}

.feed-mock-count {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-strong);
  background: var(--accent-soft);
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
}

.feed-mock-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.feed-mock-item {
  display: grid;
  grid-template-columns: 0.5rem auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.6rem;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--border-soft);
}

.feed-mock-item:last-child {
  border-bottom: 0;
}

.feed-mock-item--unread {
  background: color-mix(in srgb, var(--accent-soft) 65%, transparent);
}

.feed-mock-indicator {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  margin-top: 0.55rem;
  background: transparent;
  flex-shrink: 0;
}

.feed-mock-item--unread .feed-mock-indicator {
  background: var(--accent-strong);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-strong) 25%, transparent);
}

.feed-mock-link {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--accent-strong);
  cursor: pointer;
}

.feed-mock-link:hover {
  text-decoration: underline;
}

.feed-mock-item:not(.feed-mock-item--unread) .feed-mock-text,
.feed-mock-item:not(.feed-mock-item--unread) .feed-mock-text strong,
.feed-mock-item:not(.feed-mock-item--unread) .feed-mock-context {
  color: var(--text-muted);
}

.feed-mock-avatar {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent-strong);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.05rem;
}

.feed-mock-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.feed-mock-text {
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--text);
}

.feed-mock-text strong {
  font-weight: 600;
}

.feed-mock-context {
  font-weight: 600;
  color: var(--text);
}

.feed-mock-quote {
  margin-top: 0.3rem;
  padding: 0.4rem 0.55rem;
  border-left: 2px solid var(--accent-border);
  background: var(--bg-tinted);
  font-size: 0.7rem;
  line-height: 1.45;
  color: var(--text-muted);
  border-radius: 0 4px 4px 0;
}

.feed-mock-time {
  font-size: 0.62rem;
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin-top: 0.15rem;
}

/* Shared shell for all Beyond-the-form mocks — fills the fixed 14rem inner
   area of .feature-explorer-panel-mock with a card-on-card chrome. */
.email-mock,
.docs-mock,
.mini-list-mock,
.readonly-mock,
.audit-mock,
.files-mock,
.import-mock,
.capacity-mock {
  width: 100%;
  height: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  font-family: 'Inter', sans-serif;
  color: var(--text);
  display: flex;
  flex-direction: column;
}

.email-mock-head,
.docs-mock-head,
.mini-list-mock-head,
.readonly-mock-head,
.audit-mock-head,
.files-mock-head,
.import-mock-head,
.capacity-mock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  background: var(--bg-tinted);
  border-bottom: 1px solid var(--border-soft);
}

.email-mock-title,
.docs-mock-title,
.mini-list-mock-title,
.readonly-mock-title,
.audit-mock-title,
.files-mock-title,
.import-mock-title,
.capacity-mock-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}

/* Templated email mock */

.email-mock-head-meta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.email-mock-from {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text);
}

.email-mock-to {
  font-size: 0.64rem;
  color: var(--text-muted);
}

.email-mock-status {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  white-space: nowrap;
}

.email-mock-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.75rem 0.85rem;
}

.email-mock-subject {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text);
}

.email-mock-text {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.email-mock-text strong {
  color: var(--text);
  font-weight: 600;
}

.email-mock-attachment {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.6rem;
  background: var(--bg-tinted);
  border: 1px solid var(--border);
  border-radius: 4px;
  align-self: flex-start;
  font-size: 0.66rem;
  color: var(--text-muted);
}

.email-mock-attachment svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

.email-mock-attachment-name {
  color: var(--text);
  font-weight: 600;
}

/* Word & PDF generation mock */

.docs-mock-list {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.docs-mock-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--border-soft);
}

.docs-mock-item:last-child {
  border-bottom: 0;
}

.docs-mock-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 36px;
  background: var(--bg-tinted);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  flex-shrink: 0;
}

.docs-mock-icon--pdf {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent-strong);
}

.docs-mock-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.docs-mock-name {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: -0.005em;
}

.docs-mock-sub {
  font-size: 0.62rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.docs-mock-size {
  font-size: 0.62rem;
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* List views mock — compact ops-table style mirroring the Use Cases workspace list */

.mini-list-mock-count {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
}

.mini-list-mock-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  background: color-mix(in srgb, var(--bg-tinted) 50%, var(--card));
  border-bottom: 1px solid var(--border-soft);
}

.mini-list-mock-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.55rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.62rem;
  color: var(--text-subtle);
  min-width: 0;
}

.mini-list-mock-search svg {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  color: var(--text-subtle);
}

.mini-list-mock-tools {
  display: flex;
  gap: 0.15rem;
  flex-shrink: 0;
}

.mini-list-mock-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-strong);
  border-radius: 3px;
  cursor: pointer;
}

.mini-list-mock-tool svg {
  width: 11px;
  height: 11px;
}

.mini-list-mock-table {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.mini-list-mock-row {
  display: grid;
  grid-template-columns: var(--mini-list-cols, 44px minmax(0, 1.4fr) minmax(0, 0.85fr) minmax(0, 0.85fr) minmax(0, 1.1fr) minmax(0, 1fr));
  align-items: center;
  gap: 0.4rem;
  padding: 0.22rem 0.7rem;
  font-size: 0.66rem;
  color: var(--text);
  border-bottom: 1px solid var(--border-soft);
  min-width: 0;
}

.mini-list-mock-row:last-child {
  border-bottom: 0;
}

.mini-list-mock-row--head {
  background: color-mix(in srgb, var(--bg-tinted) 70%, var(--card));
  font-size: 0.54rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
}

.mini-list-mock-row--accent {
  background: color-mix(in srgb, var(--accent-soft) 50%, transparent);
}

.mini-list-mock-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.mini-list-mock-cell--actions {
  display: flex;
  gap: 0.05rem;
  overflow: visible;
}

.mini-list-mock-cell--primary {
  color: var(--text);
  font-weight: 500;
}

.mini-list-mock-row--accent .mini-list-mock-cell--primary {
  color: var(--accent-strong);
  font-weight: 600;
}

.mini-list-mock-cell--meta {
  color: var(--text-muted);
}

.mini-list-mock-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.mini-list-mock-sort-icon {
  width: 7px;
  height: 9px;
  opacity: 0.5;
  flex-shrink: 0;
}

.mini-list-mock-row-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-strong);
  border-radius: 3px;
  cursor: pointer;
}

.mini-list-mock-row-action svg {
  width: 11px;
  height: 11px;
}

.mini-list-mock-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  background: var(--bg-tinted);
  border-top: 1px solid var(--border-soft);
  font-size: 0.6rem;
  color: var(--text-muted);
}

.mini-list-mock-pagination {
  display: flex;
  gap: 0.15rem;
}

.mini-list-mock-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 0.3rem;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-muted);
  font-size: 0.58rem;
  font-weight: 500;
  border-radius: 3px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}

.mini-list-mock-page-btn.is-active {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
}

.mini-list-mock-page-btn svg {
  width: 7px;
  height: 7px;
}

/* Read-only pages mock — stat tiles + read-only field display */

.readonly-mock-meta {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}

.readonly-mock-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  padding: 0.7rem 0.85rem 0.6rem;
}

.readonly-mock-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.45rem 0.6rem;
  background: var(--bg-tinted);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
}

.readonly-mock-stat:has(.readonly-mock-stat-num--warn) {
  border-left-color: var(--warn-color);
}

.readonly-mock-stat-num {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.readonly-mock-stat-num--warn {
  color: var(--warn-color);
}

.readonly-mock-stat-suffix {
  font-size: 0.62rem;
  color: var(--text-subtle);
  font-weight: 500;
}

.readonly-mock-stat-label {
  font-size: 0.54rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin-top: 0.3rem;
}

.readonly-mock-fields {
  display: flex;
  flex-direction: column;
  padding: 0 0.85rem 0.7rem;
  gap: 0.05rem;
  border-top: 1px solid var(--border-soft);
}

.readonly-mock-field {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.4rem 0.1rem;
  border-bottom: 1px solid var(--border-soft);
}

.readonly-mock-field:last-child {
  border-bottom: 0;
}

.readonly-mock-fields > .readonly-mock-field:first-child {
  padding-top: 0.55rem;
}

.readonly-mock-field-label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-subtle);
}

.readonly-mock-field-value {
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--text);
}

/* Layout Designer mock — read-only page being edited */

.layout-mock-pageheader {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.6rem 0.85rem 0.55rem;
  border-bottom: 1px solid var(--border-soft);
}

.layout-mock-back {
  font-size: 0.6rem;
  color: var(--text-subtle);
  font-weight: 500;
}

.layout-mock-pagetitle {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  line-height: 1.3;
}

.layout-mock-pagemeta {
  font-size: 0.6rem;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.layout-mock-pagemeta-sep {
  color: var(--text-subtle);
}

.layout-mock-tabs {
  display: flex;
  gap: 0.6rem;
  padding: 0 0.85rem;
  border-bottom: 1px solid var(--border-soft);
}

.layout-mock-tab {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 0.4rem 0.1rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.layout-mock-tab.is-active {
  color: var(--accent-strong);
  border-bottom-color: var(--accent);
}

.readonly-mock-stats.is-selected {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
  border-radius: 4px;
}

.layout-mock-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0.55rem 0.85rem 0;
  padding: 0.5rem 0.65rem;
  background: var(--bg-tinted);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  min-width: 0;
}

.layout-mock-bar.is-selected {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.layout-mock-bar-info {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  min-width: 0;
}

.layout-mock-bar-info-main {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.layout-mock-bar-info-sub {
  font-size: 0.6rem;
  color: var(--text-muted);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.layout-mock-bar-text {
  font-size: 0.62rem;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.layout-mock-input-group {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.layout-mock-input-group > .editor-mock-panel-dropdown {
  flex: 0 0 50%;
  min-width: 0;
}

.layout-mock-input-unit {
  font-size: 0.66rem;
  color: var(--text-subtle);
  font-weight: 500;
}

.layout-mock-actionbtn {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.18rem 0.5rem;
  font-size: 0.6rem;
  color: var(--text);
  font-weight: 500;
  font-family: inherit;
  flex-shrink: 0;
}

.layout-mock-actionbtn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
}

/* Layout Designer right panel — Element Properties + Child Elements */

.editor-mock--layout-designer .editor-mock-body {
  grid-template-columns: minmax(0, 1fr) 220px;
}

.layout-mock-panel-subtitle {
  font-size: 0.66rem;
  color: var(--text-muted);
  margin-bottom: 0.55rem;
}

.layout-mock-prop-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.55rem 0.5rem;
  margin-top: 0.6rem;
}

.layout-mock-prop-grid .editor-mock-panel-field-label {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--text);
  font-size: 0.66rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.layout-mock-grip {
  color: var(--text-subtle);
  font-size: 0.95rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
  user-select: none;
}

.layout-mock-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.editor-mock-panel-segmented--full {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}

.editor-mock-panel-segmented--full > span {
  text-align: center;
  padding: 0.3rem 0.45rem;
  font-weight: 600;
}

.editor-mock-panel-dropdown--placeholder > span {
  color: var(--text-subtle);
}

/* Audit trail mock */

.audit-mock-meta {
  font-size: 0.6rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.audit-mock-list {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.audit-mock-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.6rem;
  padding: 0.5rem 0.85rem;
  border-bottom: 1px solid var(--border-soft);
}

.audit-mock-item:last-child {
  border-bottom: 0;
}

.audit-mock-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
  margin-top: 0.45rem;
  flex-shrink: 0;
}

.audit-mock-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.audit-mock-text {
  font-size: 0.74rem;
  color: var(--text);
}

.audit-mock-text strong {
  font-weight: 600;
}

.audit-mock-change {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.66rem;
  color: var(--text-muted);
}

.audit-mock-field {
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.56rem;
  font-weight: 700;
}

.audit-mock-was {
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--text-subtle);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.66rem;
}

.audit-mock-arrow {
  width: 10px;
  height: 10px;
  color: var(--text-subtle);
  flex-shrink: 0;
}

.audit-mock-now {
  color: var(--accent-strong);
  font-weight: 700;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.66rem;
}

.audit-mock-change-text {
  font-size: 0.66rem;
  color: var(--text-muted);
  font-style: italic;
}

.audit-mock-time {
  font-size: 0.62rem;
  color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin-top: 0.2rem;
}

/* Files & versions mock */

.files-mock-count {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
}

.files-mock-list {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.files-mock-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  padding: 0.52rem 0.85rem;
  align-items: center;
  border-bottom: 1px solid var(--border-soft);
}

.files-mock-item:last-child {
  border-bottom: 0;
}

.files-mock-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 32px;
  background: var(--bg-tinted);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.files-mock-icon svg {
  width: 13px;
  height: 13px;
}

.files-mock-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.files-mock-row1 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.files-mock-name {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.files-mock-version {
  display: inline-flex;
  align-items: center;
  padding: 0.08rem 0.42rem;
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-radius: 3px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.files-mock-sub {
  font-size: 0.62rem;
  color: var(--text-muted);
}

.files-mock-detail {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 10.5rem) minmax(0, 1fr);
  min-height: 0;
}

/* Left pane: browse / search */

.files-mock-detail-browser {
  background: var(--bg-tinted);
  border-right: 1px solid var(--border-soft);
  padding: 0.55rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.files-mock-browser-search {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.6rem;
  color: var(--text-subtle);
}

.files-mock-browser-search svg {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  color: var(--text-subtle);
}

.files-mock-browser-list {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.files-mock-browser-item {
  padding: 0.2rem 0.45rem;
  font-size: 0.58rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--text);
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.files-mock-browser-item.is-active {
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 600;
}

/* Middle pane: file summary */

.files-mock-detail-summary {
  padding: 0.7rem 0.85rem;
  border-right: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.18rem;
  min-width: 0;
}

.files-mock-detail-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 38px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  border-radius: 3px;
  color: var(--accent-strong);
  margin-bottom: 0.35rem;
}

.files-mock-detail-icon svg {
  width: 15px;
  height: 15px;
}

.files-mock-detail-name {
  font-size: 0.66rem;
  font-weight: 600;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--text);
  word-break: break-all;
  line-height: 1.3;
}

.files-mock-detail-version {
  font-size: 0.62rem;
  color: var(--text);
  font-weight: 500;
  margin-top: 0.1rem;
}

.files-mock-detail-by {
  font-size: 0.6rem;
  color: var(--text-muted);
}

/* Right pane: stacked sections */

.files-mock-detail-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.files-mock-section {
  padding: 0.55rem 0.8rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.files-mock-section + .files-mock-section {
  border-top: 1px solid var(--border-soft);
}

.files-mock-section--expanded {
  flex: 1;
}

.files-mock-section--collapsed {
  background: color-mix(in srgb, var(--bg-tinted) 50%, var(--card));
}

.files-mock-section-header {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.54rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
}

.files-mock-section-chevron {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  color: var(--text-subtle);
}

.files-mock-version-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.files-mock-version-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.64rem;
}

.files-mock-detail-text {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.files-mock-version--past {
  background: var(--bg-tinted);
  color: var(--text-muted);
  border: 1px solid var(--border-soft);
}

.files-mock-collapsed-summary {
  font-size: 0.62rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Bulk import & export mock — spreadsheet-style preview with column mapping */

.import-mock-row-count {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
}

.import-mock-grid {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.import-mock-mapping {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.6fr) minmax(0, 1.2fr);
  background: color-mix(in srgb, var(--bg-tinted) 70%, var(--card));
  border-bottom: 1px solid var(--border);
}

.import-mock-col-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  padding: 0.42rem 0.55rem;
  border-right: 1px solid var(--border-soft);
  min-width: 0;
}

.import-mock-col-head:last-child {
  border-right: 0;
}

.import-mock-source {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.56rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  letter-spacing: -0.005em;
}

.import-mock-target {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.18rem 0.4rem;
  font-size: 0.62rem;
  color: var(--accent-strong);
  font-weight: 700;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  cursor: pointer;
}

.import-mock-target-chevron {
  width: 7px;
  height: 7px;
  color: var(--text-subtle);
  flex-shrink: 0;
}

.import-mock-target--unmapped {
  background: var(--accent-soft);
  border-color: var(--accent-border);
}

.import-mock-target--unmapped .import-mock-target-chevron {
  color: var(--accent-strong);
}

.import-mock-data {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.import-mock-data-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.6fr) minmax(0, 1.2fr);
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.66rem;
}

.import-mock-data-row > span {
  padding: 0.32rem 0.55rem;
  border-right: 1px solid var(--border-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  color: var(--text);
}

.import-mock-data-row > span:last-child {
  border-right: 0;
}

.import-mock-data-more {
  padding: 0.35rem 0.55rem;
  font-size: 0.6rem;
  color: var(--text-subtle);
  text-align: center;
  background: color-mix(in srgb, var(--bg-tinted) 40%, var(--card));
}

.import-mock-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  background: var(--bg-tinted);
  border-top: 1px solid var(--border-soft);
}

.import-mock-validation {
  font-size: 0.64rem;
  color: var(--accent-strong);
  font-weight: 600;
}

.import-mock-actions {
  display: flex;
  gap: 0.4rem;
}

.import-mock-btn {
  padding: 0.32rem 0.7rem;
  font-size: 0.62rem;
  font-weight: 600;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  line-height: 1.2;
}

.import-mock-btn--primary {
  background: var(--accent);
  border-color: var(--accent-border);
  color: var(--accent-text);
}

/* Database fundamentals (capacity) mock */

.capacity-mock-tier {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  background: var(--card);
  border: 1px solid var(--border);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}

.capacity-mock-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.85rem;
}

.capacity-mock-bar {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
}

.capacity-mock-bar-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 0.62rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
}

.capacity-mock-bar-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  color: var(--text);
  font-size: 0.74rem;
  text-transform: none;
  letter-spacing: 0;
}

.capacity-mock-bar-value span {
  color: var(--text-subtle);
  font-weight: 500;
}

.capacity-mock-bar-track {
  height: 7px;
  background: var(--bg-tinted);
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  overflow: hidden;
}

.capacity-mock-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  min-width: 4px;
}

.capacity-mock-foot {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding-top: 0.5rem;
  margin-top: auto;
  border-top: 1px solid var(--border-soft);
}

.capacity-mock-stamp {
  display: inline-flex;
  align-items: center;
  padding: 0.17rem 0.55rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--accent-strong);
  border-radius: 3px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.capacity-mock-foot-text {
  font-size: 0.64rem;
  color: var(--text-muted);
}

/* Shared shell — adds the new mocks (workspace / jobs / access / bi) to
   the same chrome the earlier mocks use. */
.workspace-mock,
.jobs-mock,
.access-mock,
.bi-mock {
  width: 100%;
  height: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  font-family: 'Inter', sans-serif;
  color: var(--text);
  display: flex;
  flex-direction: column;
}

.workspace-mock-head,
.jobs-mock-head,
.access-mock-head,
.bi-mock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  background: var(--bg-tinted);
  border-bottom: 1px solid var(--border-soft);
}

.workspace-mock-title,
.jobs-mock-title,
.access-mock-title,
.bi-mock-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}

/* Read-only pages — stat cards extension above the table */

.mini-list-mock-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
  padding: 0.55rem 0.85rem;
  background: var(--card);
  border-bottom: 1px solid var(--border-soft);
}

.mini-list-mock-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.4rem 0.55rem;
  background: var(--bg-tinted);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
}

.mini-list-mock-stat-num {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.mini-list-mock-stat-num--warn {
  color: var(--warn-color);
}

.mini-list-mock-stat-label {
  font-size: 0.54rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  margin-top: 0.25rem;
}

/* Workspaces mock — compact version of the Home / Foundation app-mock chrome:
   top bar (brand + user), left sidebar with icon nav, right content area. */

.workspace-mock-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.45rem 0.75rem;
  background: var(--accent);
  color: var(--accent-text);
  border-bottom: 1px solid var(--accent-border);
  flex-shrink: 0;
}

.workspace-mock-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent-text);
}

.workspace-mock-brand-glyph {
  width: 20px;
  height: 20px;
  background: #6f726f;
  color: #ffffff;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.workspace-mock-user {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.66rem;
  font-weight: 500;
  color: var(--accent-text);
}

.workspace-mock-user-avatar {
  width: 18px;
  height: 18px;
  background: var(--card);
  color: var(--text);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.54rem;
  font-weight: 700;
}

.workspace-mock-body {
  flex: 1;
  display: flex;
  min-height: 0;
}

.workspace-mock-sidebar {
  width: 13.0rem;
  background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--bg-tinted);
  border-right: 1px solid var(--border-soft);
  padding: 0.55rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex-shrink: 0;
}

.workspace-mock-sidebar-title {
  font-size: 0.54rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-strong);
  padding: 0.2rem 0.4rem 0.35rem;
}

.workspace-mock-nav-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.68rem;
  color: var(--text);
  padding: 0.32rem 0.45rem;
  border-radius: 4px;
  background: transparent;
  cursor: default;
  line-height: 1.2;
}

.workspace-mock-nav-item.is-active {
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
}

.workspace-mock-nav-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: currentColor;
  opacity: 0.7;
}

.workspace-mock-nav-item.is-active .workspace-mock-nav-icon {
  opacity: 1;
}

.workspace-mock-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.7rem 0.85rem;
  min-width: 0;
}

.workspace-mock-content-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border-soft);
}

.workspace-mock-content-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}

.workspace-mock-content-meta {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--text-subtle);
}

.workspace-mock-content-rows {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.workspace-mock-content-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0.55rem;
  background: color-mix(in srgb, var(--bg-tinted) 70%, var(--card));
  border: 1px solid var(--border-soft);
  border-radius: 3px;
  font-size: 0.66rem;
}

.workspace-mock-content-row--accent {
  background: var(--accent-soft);
  border-color: var(--accent-border);
}

.workspace-mock-content-row-name {
  font-weight: 600;
  color: var(--text);
}

.workspace-mock-content-row--accent .workspace-mock-content-row-name {
  color: var(--accent-strong);
}

.workspace-mock-content-row-meta {
  font-size: 0.6rem;
  color: var(--text-muted);
}

/* Scheduled jobs mock */

.jobs-mock-count {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
}

.jobs-mock-list {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.jobs-mock-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: center;
  padding: 0.5rem 0.85rem;
  border-bottom: 1px solid var(--border-soft);
}

.jobs-mock-item:last-child {
  border-bottom: 0;
}

.jobs-mock-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--bg-tinted);
  border: 1px solid var(--border);
  color: var(--text-muted);
  flex-shrink: 0;
}

.jobs-mock-icon--recurring {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent-strong);
}

.jobs-mock-icon--record {
  background: color-mix(in srgb, var(--accent-tint) 50%, var(--bg-tinted));
  border-color: var(--accent-border);
  color: var(--accent-strong);
}

.jobs-mock-icon svg {
  width: 11px;
  height: 11px;
}

.jobs-mock-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.jobs-mock-text {
  font-size: 0.74rem;
  color: var(--text);
}

.jobs-mock-text strong {
  font-weight: 600;
}

.jobs-mock-meta {
  font-size: 0.64rem;
  color: var(--text-muted);
}

.jobs-mock-status {
  font-size: 0.56rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--success-color);
  background: var(--success-bg);
  border: 1px solid var(--success-border);
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
}

/* Permissions mock — runtime record view with a permission-blocked action */

.access-mock-user {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}

.access-mock-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0.7rem 0.85rem 0.85rem;
  gap: 0.75rem;
  min-height: 0;
}

.access-mock-fields {
  display: flex;
  flex-direction: column;
}

.access-mock-field {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.32rem 0.1rem;
  border-bottom: 1px solid var(--border-soft);
}

.access-mock-field:last-child {
  border-bottom: 0;
}

.access-mock-field-label {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-subtle);
}

.access-mock-field-value {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text);
}

.access-mock-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: auto;
  padding-top: 0.55rem;
  border-top: 1px solid var(--border-soft);
}

.access-mock-action {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.32rem 0.75rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  line-height: 1.2;
}

.access-mock-action--primary {
  background: var(--accent);
  border-color: var(--accent-border);
  color: var(--accent-text);
}

.access-mock-action--disabled,
.access-mock-action[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.access-mock-action-wrap {
  position: relative;
  margin-left: auto;
}

.access-mock-tooltip {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #1e1f25;
  color: #ffffff;
  padding: 0.45rem 0.7rem;
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
  z-index: 2;
}

.access-mock-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 1.2rem;
  border: 5px solid transparent;
  border-top-color: #1e1f25;
}

.access-mock-tooltip-icon {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  color: #ffffff;
}

/* BI tooling mock — replica connection panel with credentials and limits */

.bi-mock-status {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}

.bi-mock-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem 0.75rem;
  min-height: 0;
}

.bi-mock-section-label {
  font-size: 0.56rem;
  font-weight: 700;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.bi-mock-row {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
}

.bi-mock-endpoint {
  flex: 1;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.66rem;
  color: var(--text);
  background: var(--bg-tinted);
  border: 1px solid var(--border);
  padding: 0.4rem 0.55rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
}

.bi-mock-action {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.32rem 0.65rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  white-space: nowrap;
}

.bi-mock-action svg {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

.bi-mock-limits {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.6rem;
  color: var(--text-muted);
  padding: 0 0.1rem;
}

.bi-mock-limits strong {
  color: var(--text);
  font-weight: 700;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.bi-mock-limit-divider {
  color: var(--text-subtle);
  opacity: 0.6;
}

.bi-mock-creds {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.bi-mock-cred-line {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
}

.bi-mock-cred-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.56rem;
  font-weight: 700;
  color: var(--text-subtle);
}

.bi-mock-cred-value {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--text);
  font-size: 0.66rem;
}

.bi-mock-cred-masked {
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.bi-mock-help {
  font-size: 0.6rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: auto;
}

.feature-explorer-panel-copy {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.2rem 1.3rem 1.35rem;
  height: 9.5rem;
}

.feature-explorer-panel-copy .kicker {
  margin-bottom: 0.05rem;
}

.feature-explorer-panel-copy h3 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--text);
}

.feature-explorer-panel-copy p {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--text-muted);
}

@media (max-width: 960px) {
  .feature-explorer {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .feature-explorer-nav-card {
    padding-left: 0;
    border-left: none;
  }

  .feature-explorer-panel-mock {
    height: auto;
    min-height: 0;
  }

  .feature-explorer-panel-copy {
    height: auto;
  }
}

/* Notification preview (Panel 5) */

.notif-mock {
  padding: 1rem 1.1rem;
  background: var(--bg-tinted);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  font-family: 'Inter', sans-serif;
  color: var(--text);
  min-width: 0;
}

.notif-mock-titlebar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.notif-mock-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
  color: var(--text);
}

.notif-mock-meta {
  font-size: 0.66rem;
  color: var(--text-muted);
}

.notif-mock-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.notif-mock-card--email {
  font-family: 'Inter', sans-serif;
}

.notif-mock-card-head {
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-alt);
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.notif-mock-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-text);
  flex-shrink: 0;
}

.notif-mock-card-icon svg {
  width: 12px;
  height: 12px;
}

.notif-mock-card-head-text {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
  flex: 1;
}

.notif-mock-card-from {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text);
}

.notif-mock-card-meta {
  font-size: 0.62rem;
  color: var(--text-muted);
}

.notif-mock-card-body {
  padding: 0.85rem;
}

.notif-mock-card-subject {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 0.55rem;
}

.notif-mock-card-text {
  font-size: 0.74rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0 0 0.55rem;
}

.notif-mock-card-text strong {
  color: var(--text);
  font-weight: 600;
}

.notif-mock-card-cta {
  display: inline-flex;
  align-items: center;
  padding: 0.42rem 0.8rem;
  background: var(--accent);
  color: var(--accent-text);
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  margin-top: 0.3rem;
}

.notif-mock-card-foot {
  padding: 0.5rem 0.85rem;
  border-top: 1px solid var(--border-soft);
  background: var(--bg-tinted);
  font-size: 0.62rem;
  color: var(--text-subtle);
  display: flex;
  gap: 0.85rem;
}

/* In-app notification (Panel 5) */

.notif-mock-inapp {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.65rem 0.85rem;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.notif-mock-inapp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  flex-shrink: 0;
  margin-top: 0.05rem;
}

.notif-mock-inapp-icon svg {
  width: 11px;
  height: 11px;
}

.notif-mock-inapp-body {
  flex: 1;
  min-width: 0;
}

.notif-mock-inapp-title {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.18rem;
}

.notif-mock-inapp-text {
  font-size: 0.7rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.notif-mock-inapp-time {
  font-size: 0.62rem;
  color: var(--text-subtle);
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.notif-mock-channel-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
  font-weight: 600;
  margin-bottom: 0.1rem;
}

/* List page (Panel 6) */

.list-mock {
  padding: 0.95rem 1.05rem;
  background: var(--bg-tinted);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  font-family: 'Inter', sans-serif;
  color: var(--text);
  min-width: 0;
}

.list-mock-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.list-mock-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: var(--text);
}

.list-mock-create {
  background: var(--accent);
  color: var(--accent-text);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.42rem 0.65rem;
  border-radius: 5px;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  font-family: inherit;
}

.list-mock-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.list-mock-search {
  flex: 1;
  min-width: 130px;
  padding: 0.42rem 0.55rem 0.42rem 1.85rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--card);
  font-size: 0.74rem;
  color: var(--text-muted);
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.list-mock-search svg {
  width: 12px;
  height: 12px;
  color: var(--text-subtle);
  flex-shrink: 0;
}

.list-mock-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.32rem 0.55rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.7rem;
  color: var(--text);
  font-weight: 500;
}

.list-mock-filter-chip svg {
  width: 9px;
  height: 9px;
  color: var(--text-subtle);
}

.list-mock-filter-chip.is-active {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent-strong);
}

.list-mock-table {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.list-mock-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  align-items: center;
  font-size: 0.74rem;
  border-bottom: 1px solid var(--border-soft);
  min-width: 0;
}

.list-mock-row:last-child {
  border-bottom: 0;
}

.list-mock-row--head {
  background: var(--bg-alt);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-subtle);
  font-weight: 600;
}

.list-mock-row-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.list-mock-row-cell--name {
  color: var(--text);
  font-weight: 500;
}

.list-mock-row-cell--meta {
  color: var(--text-muted);
}

.list-mock-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.66rem;
  color: var(--text-muted);
  padding: 0 0.2rem;
}

.list-mock-pagination-controls {
  display: flex;
  gap: 0.3rem;
}

.list-mock-pagination-btn {
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 4px;
  font-size: 0.66rem;
  color: var(--text-muted);
  font-family: inherit;
}

/* Bulk import wizard (Panel 7) */

.bulk-mock {
  padding: 1rem 1.1rem;
  background: var(--bg-tinted);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  font-family: 'Inter', sans-serif;
  color: var(--text);
  min-width: 0;
}

.bulk-mock-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.bulk-mock-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

.bulk-mock-steps {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.bulk-mock-step {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.32rem 0.55rem;
  border-radius: 4px;
  font-size: 0.66rem;
  color: var(--text-muted);
  font-weight: 500;
}

.bulk-mock-step.is-done {
  color: var(--accent-strong);
}

.bulk-mock-step.is-active {
  color: var(--text);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  font-weight: 600;
}

.bulk-mock-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--border);
  color: var(--text-muted);
  font-size: 0.6rem;
  font-weight: 700;
}

.bulk-mock-step.is-done .bulk-mock-step-num {
  background: var(--accent);
  color: var(--accent-text);
}

.bulk-mock-step.is-active .bulk-mock-step-num {
  background: var(--accent);
  color: var(--accent-text);
}

.bulk-mock-step-divider {
  flex: 0 0 16px;
  height: 1px;
  background: var(--border);
}

.bulk-mock-mapping {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.bulk-mock-mapping-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) auto minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  align-items: center;
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.74rem;
}

.bulk-mock-mapping-row:last-child {
  border-bottom: 0;
}

.bulk-mock-mapping-row--head {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-subtle);
  font-weight: 600;
  background: var(--bg-alt);
}

.bulk-mock-mapping-source {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text);
}

.bulk-mock-mapping-arrow {
  color: var(--text-subtle);
  flex-shrink: 0;
}

.bulk-mock-mapping-arrow svg {
  width: 12px;
  height: 12px;
}

.bulk-mock-mapping-target {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.32rem;
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-tinted);
  font-size: 0.7rem;
  font-family: var(--font-mono);
}

.bulk-mock-mapping-target svg {
  width: 10px;
  height: 10px;
  color: var(--text-subtle);
  flex-shrink: 0;
}

.bulk-mock-validation {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 600;
}

.bulk-mock-validation--ok {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border: 1px solid var(--accent-border);
}

.bulk-mock-validation--warn {
  background: var(--warn-bg);
  color: var(--warn-color);
  border: 1px solid var(--warn-border);
}

.bulk-mock-summary {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.7rem 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.74rem;
}

.bulk-mock-summary-num {
  font-size: 1.4rem;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text);
}

.bulk-mock-summary-meta {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.bulk-mock-summary-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
  font-weight: 600;
}

.bulk-mock-summary-detail {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* Custom actions (Panel 8) */

.actions-mock-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-soft);
}

.actions-mock-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.5rem 0.75rem;
  border-radius: 5px;
  font-size: 0.74rem;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-family: inherit;
}

.actions-mock-btn svg {
  width: 12px;
  height: 12px;
}

.actions-mock-btn--primary {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
}

.actions-mock-btn--warn {
  background: var(--card);
  color: var(--warn-color);
  border-color: var(--warn-border);
}

.actions-mock-modal {
  background: var(--card);
  border: 1px solid var(--accent-border);
  border-radius: 6px;
  padding: 0.7rem 0.85rem;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.actions-mock-modal-title {
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0;
}

.actions-mock-modal-text {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.45;
}

.actions-mock-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
  margin-top: 0.2rem;
}

/* Permission editor mock (Pillar 4) — sidebar nav + form */

.editor-mock--permissions .editor-mock-body {
  grid-template-columns: 160px minmax(0, 1fr);
}

/* Navigation sidebar */

.nav-mock {
  background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--bg-tinted);
  border-right: 1px solid var(--border-soft);
  padding: 0.7rem 0.3rem;
  font-family: 'Inter', sans-serif;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.nav-mock-title {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-strong);
  font-weight: 700;
  padding: 0.3rem 0.55rem 0.55rem;
}

.nav-mock-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.55rem;
  font-size: 0.74rem;
  color: var(--text);
  border-radius: 4px;
}

.nav-mock-icon {
  width: 14px;
  height: 14px;
  color: var(--accent-strong);
  flex-shrink: 0;
}

.nav-mock-chevron {
  width: 8px;
  height: 8px;
  color: var(--text-subtle);
  flex-shrink: 0;
  margin-left: auto;
}

.nav-mock-subitems {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding-left: 1.45rem;
  padding-bottom: 0.1rem;
}

.nav-mock-subitem {
  padding: 0.32rem 0.55rem;
  font-size: 0.7rem;
  color: var(--text-muted);
  border-radius: 4px;
}

.nav-mock-subitem.is-active {
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
}

/* App-mock (Foundation) variant: larger nav for the bigger console */

.app-mock .nav-mock-title {
  font-size: 0.66rem;
}

.app-mock .nav-mock-item {
  gap: 0.55rem;
  padding: 0.45rem 0.55rem;
  font-size: 0.82rem;
}

.app-mock .nav-mock-icon {
  width: 15px;
  height: 15px;
}

.app-mock .nav-mock-chevron {
  width: 9px;
  height: 9px;
}

.app-mock .nav-mock-subitems {
  padding-left: 1.6rem;
}

.app-mock .nav-mock-subitem {
  padding: 0.36rem 0.55rem;
  font-size: 0.78rem;
}

/* Operations workspace mock (Use Cases page) — interactive nav swaps right pane */

.ops-workspace-mock {
  width: 100%;
  min-height: 760px;
}

.ops-workspace-mock .app-mock-body {
  flex: 1;
}

/* Mock is static — only the left nav is real. Everything else looks
   clickable but isn't, so neutralize cursor + hover on buttons inside. */
.ops-workspace-mock button {
  cursor: text;
  user-select: text;
}

.ops-workspace-mock .app-mock-cta:hover {
  background: var(--accent);
  border-color: var(--accent);
}

.ops-nav-item {
  background: none;
  border: 0;
  font: inherit;
  width: 100%;
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease;
}

/* Re-enable real interactivity for the nav items only */
.ops-workspace-mock .ops-nav-item {
  cursor: pointer;
  user-select: none;
}

.ops-nav-item:hover {
  background: var(--bg-tinted);
}

.ops-nav-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.ops-nav-item.is-active {
  background: var(--accent);
  color: var(--accent-text);
}

.ops-nav-item.is-active .nav-mock-icon {
  color: var(--accent-text);
}

.ops-workspace-main {
  padding: 0;
  background: var(--bg-tinted);
}

.ops-pane {
  padding: 1.05rem 1.4rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
  flex: 1;
}

.ops-pane[hidden] {
  display: none;
}

.ops-pane-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  padding: 2rem;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--text-subtle);
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
}

.ops-pane-placeholder small {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

/* GF-style table toolbar (search + tool icons) */

.ops-table-toolbar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.ops-table-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.8rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-subtle);
  font-size: 0.78rem;
  min-width: 0;
}

.ops-table-search-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  opacity: 0.55;
}

.ops-table-search-placeholder {
  color: var(--text-subtle);
}

.ops-table-tools {
  display: flex;
  gap: 0.15rem;
  flex-shrink: 0;
}

.ops-table-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-strong);
  border-radius: 5px;
}

.ops-table-tool-btn svg {
  width: 14px;
  height: 14px;
}

/* GF-style data table */

.ops-table {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.ops-table-row {
  display: grid;
  grid-template-columns: var(--ops-table-cols, 76px minmax(0, 1.55fr) minmax(0, 1.1fr) minmax(0, 0.95fr) minmax(0, 1fr) minmax(0, 1.25fr));
  gap: 0.7rem;
  padding: 0.7rem 0.95rem;
  align-items: center;
  font-size: 0.78rem;
  color: var(--text);
  border-bottom: 1px solid var(--border-soft);
  min-width: 0;
}

.ops-table-row:last-child {
  border-bottom: 0;
}

.ops-table-row--head {
  background: var(--bg-alt);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-subtle);
  font-weight: 600;
}

.ops-table-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.ops-table-cell--actions {
  display: flex;
  gap: 0.15rem;
  overflow: visible;
}

.ops-table-cell--primary {
  color: var(--text);
  font-weight: 500;
}

.ops-table-cell--meta {
  color: var(--text-muted);
}

.ops-table-cell--stack {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  overflow: hidden;
  min-width: 0;
  white-space: normal;
}

.ops-table-cell-name {
  color: var(--text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-table-cell-sub {
  color: var(--text-subtle);
  font-size: 0.66rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-table-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.ops-table-sort-icon {
  width: 9px;
  height: 11px;
  opacity: 0.5;
  flex-shrink: 0;
}

.ops-table-row-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-strong);
  border-radius: 4px;
}

.ops-table-row-action-btn svg {
  width: 13px;
  height: 13px;
}

/* Pagination footer */

.ops-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

.ops-table-pagination {
  display: flex;
  gap: 0.2rem;
}

.ops-table-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 0.45rem;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 500;
  border-radius: 4px;
}

.ops-table-page-btn.is-active {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
}

.ops-table-page-btn svg {
  width: 9px;
  height: 9px;
}

.ops-table-page-ellipsis {
  display: inline-flex;
  align-items: center;
  padding: 0 0.2rem;
  color: var(--text-subtle);
}

/* Dashboard-style KPI tiles + section header (Contract Renewals) */

.ops-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.ops-kpi-tile {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.8rem 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-width: 0;
}

.ops-kpi-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
  color: var(--text-subtle);
}

.ops-kpi-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.05;
}

.ops-kpi-caption {
  font-size: 0.7rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.85rem;
  margin-top: 0.3rem;
}

.ops-section-header-titleblock {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.ops-section-header-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.ops-section-header-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin: 0;
}

.ops-section-link {
  font-size: 0.72rem;
  color: var(--accent-strong);
  font-weight: 500;
  text-decoration: none;
  flex-shrink: 0;
}

.ops-chip-group {
  display: inline-flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

/* Health-score badge */

.ops-health {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
}

.ops-health::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  flex-shrink: 0;
}

.ops-health--high { color: var(--accent-strong); }
.ops-health--mid { color: var(--text-muted); }
.ops-health--low { color: var(--warn-color); }

/* Stage-group header (Product Evaluations) */

.ops-stage-header {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  padding: 0 0.15rem;
  margin-top: 0.25rem;
}

.ops-stage-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.ops-stage-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* Card grid (Vendor Onboarding in-flight cards) */

.ops-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.ops-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}

.ops-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
}

.ops-card-titleblock {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.ops-card-title {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-card-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-card-byline {
  font-size: 0.7rem;
  color: var(--text-subtle);
}

/* Schedule / dispatch board (Loaner Returns): date on left, events on right */

.ops-schedule {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.ops-schedule-group {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 0.95rem;
  padding: 0.75rem 0.95rem;
  border-bottom: 1px solid var(--border-soft);
}

.ops-schedule-group:last-child {
  border-bottom: 0;
}

.ops-schedule-date {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding-top: 0.1rem;
}

.ops-schedule-date-primary {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
}

.ops-schedule-date-secondary {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.ops-schedule-group--today .ops-schedule-date-primary {
  color: var(--accent-strong);
}

.ops-schedule-items {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
}

.ops-schedule-item {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.35fr) minmax(0, 0.95fr) 24px;
  gap: 0.65rem;
  align-items: center;
  font-size: 0.76rem;
  min-width: 0;
}

.ops-schedule-item-cell {
  overflow: hidden;
  min-width: 0;
}

.ops-schedule-item-cell--stack {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.ops-schedule-item-name {
  color: var(--text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-schedule-item-sub {
  font-size: 0.66rem;
  color: var(--text-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Watchlist meter card (Warranty Claims) */

.ops-card-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ops-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.ops-watchlist-meter {
  height: 5px;
  background: var(--accent-soft);
  border-radius: 999px;
  overflow: hidden;
}

.ops-watchlist-meter-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}

.ops-watchlist-meter-fill--over {
  background: var(--warn-color);
}

/* Permission editor body */

.perm-mock {
  padding: 1.1rem 1.2rem;
  background: var(--bg-tinted);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  font-family: 'Inter', sans-serif;
  color: var(--text);
}

.perm-mock-titlebar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.perm-mock-titlebar-left {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.perm-mock-back {
  font-size: 0.7rem;
  color: var(--accent-strong);
  text-decoration: none;
  font-weight: 500;
  cursor: text;
}

.perm-mock-title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 100%;
}

.perm-mock-save {
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
  font-size: 0.74rem;
  padding: 0.45rem 0.6rem;
  border-radius: 5px;
  border: 0;
  flex-shrink: 0;
  white-space: nowrap;
}

.perm-mock-section-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
  font-weight: 600;
  margin-bottom: 0.55rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Page Info card */

.perm-mock-section-split {
  align-items: stretch;
}

.perm-mock-meta-fieldset {
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.42rem;
}

.perm-mock-meta-field {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  max-width: 100%;
}

.perm-mock-meta-label {
  font-size: 0.63rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.perm-mock-meta-value {
  font-size: 0.78rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.perm-mock-meta-value--datetime {
  display: flex;
  flex-direction: column;
  /* gap: 0.05rem; */
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
}

.perm-mock-meta-value-time {
  font-size: 0.65rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.perm-mock-meta-checkbox .form-mock-checkbox-box.is-checked {
  background: var(--bg-alt);
  border-color: var(--border);
  color: var(--text-muted);
  font-weight: 450;
}

.perm-mock-meta-link {
  font-size: 0.7rem;
  color: var(--accent-strong);
  font-weight: 500;
  text-decoration: none;
  cursor: text;
  margin-top: 0.15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.perm-mock-tables {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.perm-mock-tables-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
  font-weight: 600;
  margin-bottom: 0.4rem;
  min-width: 0;
}

.perm-mock-tables-title > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.perm-mock-table-list {
  display: flex;
  flex-direction: column;
}

.perm-mock-info-pill {
  display: inline-block;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  padding: 0.14rem 0.45rem;
  border-radius: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.perm-mock-table-key {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  text-transform: none;
  letter-spacing: 0;
  min-width: 0;
}

.perm-mock-table-key .perm-mock-table-rel,
.perm-mock-table-key .perm-mock-table-access {
  display: inline-block;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.perm-mock-table-key-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
  font-weight: 600;
  margin-right: 0.05rem;
}

.perm-mock-table-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0;
  min-width: 0;
}

.perm-mock-table-row + .perm-mock-table-row {
  border-top: 1px solid var(--border-soft);
}

.perm-mock-table-name {
  /* font-family: var(--font-mono); */
  font-size: 0.78rem;
  color: var(--text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.perm-mock-table-rel,
.perm-mock-table-access {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Relation: greyscale, value-shaded (Lookup is the medium default) */
.perm-mock-table-rel {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.perm-mock-table-rel--primary {
  background: var(--border);
  color: var(--text);
  border-color: var(--border);
}

/* Access: accent, value-shaded (Read is the default) */
.perm-mock-table-access {
  background: transparent;
  color: var(--accent-strong);
  border: 1px solid var(--accent-border);
}

.perm-mock-table-access--full {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
}

.perm-mock-table-access--update {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-color: var(--accent-border);
}

/* Roles list */

.perm-mock-roles {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
}

.perm-mock-roles-head {
  display: flex;
  justify-content: space-between;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
  font-weight: 600;
  padding: 0 0.1rem 0.15rem;
}

.perm-mock-role-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
  padding: 0.1rem 0;
  font-size: 0.78rem;
}

.perm-mock-role-name {
  flex: 1;
  color: var(--text);
  font-weight: 500;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.perm-mock-role-name {
  color: var(--text);
}

.perm-mock-warning {
  padding: 0.45rem 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--warn-border);
  background: var(--warn-bg);
  color: var(--warn-color);
  font-size: 0.72rem;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.perm-mock-warning code {
  font-family: var(--font-mono);
  font-size: 0.66rem;
}

.perm-mock-warning-link {
  text-decoration: underline;
}

@media (max-width: 720px) {
  .editor-mock-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .editor-mock-panel {
    border-left: none;
    border-top: 1px solid var(--border-soft);
  }
  .editor-mock--permissions .editor-mock-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .nav-mock {
    border-right: none;
    border-bottom: 1px solid var(--border-soft);
  }
}

/* Release Manager mock (Sandbox & Deployments) */

.editor-mock--release .editor-mock-body {
  grid-template-columns: minmax(0, 1fr) 200px;
}

.release-mock {
  padding: 1rem 1.1rem;
  background: var(--bg-tinted);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  font-family: 'Inter', sans-serif;
  color: var(--text);
  min-width: 0;
}

.release-mock-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.release-mock-titlebar-left {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
}

.release-mock-meta-link {
  font-size: 0.7rem;
  color: var(--accent-strong);
  font-weight: 500;
  cursor: text;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.release-mock-title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.release-mock-env-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.22rem 0.5rem 0.22rem 0.42rem;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

.release-mock-env-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

/* Section (Staged / Draft) */

.release-mock-section {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.release-mock-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
  min-width: 0;
}

.release-mock-section-title-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.release-mock-section-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.release-mock-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--border);
  color: var(--text-muted);
  font-size: 0.62rem;
  font-weight: 700;
}

/* Change list */

.release-mock-change-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.release-mock-change {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.release-mock-change.is-staged {
  border-color: var(--border);
}

.release-mock-change-row {
  display: grid;
  grid-template-columns: 16px auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.5rem;
  min-width: 0;
}

.release-mock-change-toggle {
  background: transparent;
  border: 0;
  padding: 0;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.release-mock-change-toggle svg {
  width: 10px;
  height: 10px;
}

.release-mock-change-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.28rem;
  border-radius: 4px;
  flex-shrink: 0;
}

.release-mock-change-type svg {
  width: 14px;
  height: 14px;
}

.release-mock-change-type--page,
.release-mock-change-type--schema {
  color: var(--text-muted);
  background: var(--bg-tinted);
  border: 1px solid var(--border);
}

.release-mock-change-name {
  font-size: 0.74rem;
  color: var(--text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.release-mock-change-name code {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text);
  background: transparent;
  padding: 0;
}

.release-mock-change-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  flex-shrink: 0;
}

.release-mock-change-status svg {
  width: 11px;
  height: 11px;
}

.release-mock-change-status--valid {
  background: var(--accent);
  color: var(--accent-text);
}

.release-mock-change-status--invalid {
  width: auto;
  height: 18px;
  padding: 0 0.5rem 0 0.35rem;
  gap: 0.22rem;
  background: var(--warn-bg);
  color: var(--warn-color);
  border: 1px solid var(--warn-border);
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.release-mock-change-status--invalid svg {
  width: 9px;
  height: 9px;
}

.release-mock-icon-btn {
  background: transparent;
  border: 0;
  padding: 0.2rem;
  margin: -0.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  border-radius: 4px;
}

.release-mock-icon-btn svg {
  width: 12px;
  height: 12px;
}

.release-mock-action-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.2rem 0.5rem;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0;
  font-family: inherit;
}

.release-mock-action-btn--stage {
  color: var(--accent-text);
  background: var(--accent);
  border-color: var(--accent);
}

.release-mock-action-btn--stage:disabled {
  opacity: 0.45;
}

.release-mock-action-btn--unstage {
  color: var(--text-muted);
  background: var(--card);
}

.release-mock-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--card);
  color: var(--text-muted);
  flex-shrink: 0;
  font-family: inherit;
}

.release-mock-action-icon svg {
  width: 11px;
  height: 11px;
}

.release-mock-action-icon--stage {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}

.release-mock-action-icon--stage:disabled {
  opacity: 0.45;
}

.release-mock-action-icon--unstage {
  background: var(--card);
  border-color: var(--accent-border);
  color: var(--accent-strong);
}

.release-mock-change-detail-list {
  list-style: none;
  margin: 0;
  padding: 0.1rem 0.7rem 0.55rem 1.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  border-top: 1px dashed var(--border-soft);
  padding-top: 0.4rem;
  margin-top: 0.05rem;
}

.release-mock-change-detail-list li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 0.4rem;
  align-items: baseline;
  font-size: 0.7rem;
  color: var(--text-muted);
  line-height: 1.45;
  min-width: 0;
}

.release-mock-change-detail-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.release-mock-change-detail-verb {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent-strong);
  font-weight: 700;
  text-align: center;
  line-height: 1;
}

/* Right panel deploy button + sections */

.release-mock-deploy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 0.7rem;
  background: var(--accent);
  color: var(--accent-text);
  border: 0;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 650;
  font-family: inherit;
  width: 100%;
  box-shadow:
    0 0 0 3px var(--accent-soft),
    0 6px 14px var(--accent-glow);
  letter-spacing: 0.01em;
  margin: 0.2rem 0 0.85rem;
}

.release-mock-deploy-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.release-mock-meta-stack {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}

.release-mock-meta-version {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text);
  /* font-weight: 600; */
}

.release-mock-meta-time {
  font-size: 0.65rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.release-mock-status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

.release-mock-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-text);
}

.release-mock-status-icon svg {
  width: 8px;
  height: 8px;
}

.release-mock-validation-summary {
  font-size: 0.68rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.release-mock-validation-banner {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.7rem;
  border-radius: 6px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  margin-top: -0.2rem;
  min-width: 0;
}

.release-mock-validation-banner-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-text);
  flex-shrink: 0;
}

.release-mock-validation-banner-icon svg {
  width: 11px;
  height: 11px;
}

.release-mock-validation-banner-text {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.4;
  min-width: 0;
}

.release-mock-validation-banner-text strong {
  color: var(--accent-strong);
  font-weight: 600;
}

/* Consolidated Last Release block (label + version inline, time below) */

.release-mock-last-release {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}

.release-mock-last-release-head {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  min-width: 0;
}

.release-mock-premium-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.42rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.release-mock-migration-note {
  font-size: 0.66rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin-top: 0.15rem;
}

.release-mock-configure-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
  width: 100%;
  padding: 0.4rem 0.5rem;
  background: var(--accent-soft);
  color: var(--accent-strong);
  border: 1px solid var(--accent-strong);
  border-radius: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: inherit;
  margin-top: 0.1rem;
}

.release-mock-configure-btn svg {
  width: 11px;
  height: 11px;
}

/* SQL Query Editor mock (Premium) */

.editor-mock--query .editor-mock-body {
  grid-template-columns: minmax(0, 1fr) 200px;
}

.query-mock {
  padding: 1rem 1.1rem;
  background: var(--bg-tinted);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  font-family: 'Inter', sans-serif;
  color: var(--text);
  min-width: 0;
}

/* Editor (CodeMirror-style) */

.query-mock-editor {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 5px;
  overflow: hidden;
  min-width: 0;
}

.query-mock-code {
  list-style: none;
  margin: 0;
  padding: 0.55rem 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.6;
  color: var(--text);
  counter-reset: line;
  min-width: 0;
}

.query-mock-code li {
  counter-increment: line;
  padding-left: 2.85rem;
  padding-right: 0.7rem;
  position: relative;
  white-space: pre-wrap;
  min-height: 1.6em;
  word-break: break-word;
}

.query-mock-code li::before {
  content: counter(line);
  position: absolute;
  left: 0;
  width: 2.25rem;
  text-align: right;
  padding-right: 0.55rem;
  border-right: 1px solid var(--border-soft);
  color: var(--text-subtle);
  font-size: 0.6rem;
  font-weight: 500;
  user-select: none;
}

/* SQL syntax tokens */

.qm-kw {
  color: var(--accent-strong);
  font-weight: 600;
}

.qm-fn {
  color: var(--accent-strong);
  font-weight: 500;
}

.qm-id {
  color: var(--text);
}

.qm-tbl {
  color: var(--text);
  font-weight: 500;
}

.qm-alias {
  color: var(--text);
  font-style: italic;
}

.qm-param {
  color: var(--accent-strong);
  background: var(--accent-soft); 
  border: 1px solid var(--accent-border);
  border-radius: 3px;
  padding: 0 0.22rem;
  font-weight: 600;
}

.qm-str {
  color: var(--text-muted);
}

.qm-op {
  color: var(--text-subtle);
  font-weight: 500;
}

.qm-num {
  color: var(--text-muted);
}

/* Status bar (engine validation indicators) */

.query-mock-statusbar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.45rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 0.66rem;
  color: var(--text-muted);
  min-width: 0;
}

.query-mock-engine {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.16rem 0.42rem;
  border-radius: 4px;
  background: var(--bg-tinted);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}

.query-mock-engine-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-text);
  flex-shrink: 0;
}

.query-mock-engine-icon svg {
  width: 7px;
  height: 7px;
}

.query-mock-engine--issue {
  background: var(--warn-bg);
  border-color: var(--warn-border);
  color: var(--warn-color);
}

.query-mock-engine--issue .query-mock-engine-icon {
  background: var(--warn-color);
  color: var(--warn-bg);
}

.query-mock-engine-meta {
  font-weight: 500;
  opacity: 0.8;
  margin-left: 0.05rem;
}

.query-mock-statusbar-spacer {
  flex: 1;
  min-width: 0;
}

.query-mock-statusbar-info {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--text-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Right panel lists */

.query-mock-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
}

.query-mock-list li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.7rem;
  min-width: 0;
}

.query-mock-list-name {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text);
  font-weight: 500;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.query-mock-list-type {
  font-size: 0.58rem;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  flex-shrink: 0;
}

.query-mock-list--results .query-mock-list-marker {
  width: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--accent-strong);
  font-weight: 700;
  text-align: center;
  line-height: 1;
  flex-shrink: 0;
}

.query-mock-list-required .query-mock-list-name {
  font-weight: 600;
}

.query-mock-shape-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.08rem 0.4rem;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--accent-strong);
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.query-mock-list--tables li {
  gap: 0.4rem;
}

.query-mock-list--tables svg {
  width: 11px;
  height: 11px;
  color: var(--text-subtle);
  flex-shrink: 0;
}

/* Parameters mapping (Edit Mapping button + page-state note) */

.query-mock-mapping-btn {
  background: none;
  border: 0;
  padding: 0.1rem 0.35rem;
  margin: -0.1rem -0.35rem;
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  color: var(--accent-strong);
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 4px;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
}

.query-mock-mapping-btn svg {
  width: 9px;
  height: 9px;
}

.query-mock-mapping-note {
  font-size: 0.65rem;
  color: var(--text-subtle);
  margin: -0.2rem 0 0.5rem;
  font-style: italic;
}

/* Columns Read — table groups with nested columns */

.query-mock-table-group + .query-mock-table-group {
  margin-top: 0.5rem;
}

.query-mock-table-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  margin-bottom: 0.2rem;
  min-width: 0;
}

.query-mock-table-head svg {
  width: 11px;
  height: 11px;
  color: var(--text-subtle);
  flex-shrink: 0;
}

.query-mock-table-head-name {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.query-mock-column-list {
  list-style: none;
  margin: 0 0 0 0.32rem;
  padding: 0 0 0 0.85rem;
  border-left: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
}

.query-mock-column-list li {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--text-muted);
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Permissions warning notice (bottom of main panel) */

.query-mock-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  border-radius: 6px;
  border: 1px solid var(--warn-border);
  background: var(--warn-bg);
  color: var(--warn-color);
  font-size: 0.7rem;
  line-height: 1.45;
  min-width: 0;
}

.query-mock-warning-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--warn-color);
  color: var(--warn-bg);
  flex-shrink: 0;
  margin-top: 0.05rem;
}

.query-mock-warning-icon svg {
  width: 9px;
  height: 9px;
}

.query-mock-warning-text {
  min-width: 0;
}

.query-mock-warning strong {
  color: var(--warn-color);
  font-weight: 700;
}

.query-mock-warning code {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  padding: 0 0.18rem;
  background: var(--card);
  border: 1px solid var(--warn-border);
  border-radius: 3px;
  color: var(--warn-color);
}

/* Code/UI mock cards used inside split */

.mock-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.mock-card-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.95rem;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-alt);
  font-size: 0.78rem;
  color: var(--text-muted);
}

.mock-card-header-dots {
  display: flex;
  gap: 5px;
}

.mock-card-header-dots span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--border);
}

.mock-card-body {
  padding: 1.1rem 1.25rem 1.3rem;
  font-size: 0.88rem;
}

.mock-card-body.has-code {
  padding: 0;
}

.mock-card pre {
  margin: 0;
  padding: 1.1rem 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--code-bg);
  overflow-x: auto;
}

.mock-card pre .kw   { color: var(--code-kw);  font-weight: 600; }
.mock-card pre .str  { color: var(--code-str); }
.mock-card pre .num  { color: var(--code-num); }
.mock-card pre .com  { color: var(--code-com); font-style: italic; }
.mock-card pre .fn   { color: var(--code-fn);  font-weight: 600; }
.mock-card pre .tbl  { color: var(--code-tbl); font-weight: 600; }

/* Inline form-row mock */

.mock-row {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: 0.65rem 1rem;
  align-items: center;
  padding: 0.4rem 0;
  border-bottom: 1px dashed var(--border-soft);
  font-size: 0.88rem;
}

.mock-row:last-child {
  border-bottom: none;
}

.mock-row-label {
  color: var(--text-subtle);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mock-row-value {
  color: var(--text);
}

.mock-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  background: var(--accent-tint);
  color: var(--accent);
  border: 1px solid var(--accent-border);
}

.mock-pill.is-warn {
  background: var(--warn-bg);
  color: var(--warn-color);
  border-color: var(--warn-border);
}

.mock-pill.is-success {
  background: var(--success-bg);
  color: var(--success-color);
  border-color: var(--success-border);
}

/* Master-detail mock table */

.mock-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.84rem;
}

.mock-table th,
.mock-table td {
  padding: 0.55rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
}

.mock-table th {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-subtle);
  font-weight: 500;
  background: var(--bg-alt);
}

.mock-table tbody tr:last-child td {
  border-bottom: none;
}

.mock-table .num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ------- Pricing ------- */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1rem;
}

.price-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.6rem 1.6rem;
  display: flex;
  flex-direction: column;
}

.price-card--premium {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow-md);
}

.price-card.is-featured {
  border-color: var(--accent-border);
  background: linear-gradient(180deg, var(--card), var(--accent-tint));
  box-shadow: var(--shadow-md);
}

.price-card.is-featured::before {
  content: "Most popular";
  position: absolute;
  top: -10px;
  right: 1.25rem;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}

.price-name {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin: 0 0 0.5rem;
}

.price-amount {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0 0 0.4rem;
}

.price-amount .num {
  font-size: 2.3rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.price-amount .unit {
  color: var(--text-muted);
  font-size: 0.92rem;
}

.price-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0 0 1.1rem;
}

.price-meta-line {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  line-height: 1.4;
}

.price-meta-line--subtle {
  font-weight: 400;
  font-size: 0.76rem;
  color: var(--text-muted);
}

.price-blurb {
  font-size: 0.92rem;
  color: var(--text-muted);
  margin: 0 0 1.4rem;
  min-height: 2.6em;
}

.price-features {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.55rem;
  font-size: 0.92rem;
  color: var(--text);
}

.price-features li {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  line-height: 1.5;
}

.price-features li::before {
  content: "✓";
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
}

.price-card .btn {
  width: 100%;
  margin-top: auto;
}

/* Comparison table */

.compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 2.5rem;
  font-size: 0.92rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card)
}

.compare-table th,
.compare-table td {
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border-soft);
}

.compare-table thead th {
  background: var(--bg-alt);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 600;
}

.compare-table tbody tr:last-child td {
  border-bottom: none;
}

.compare-table th + th,
.compare-table td + td {
  text-align: center;
  border-left: 1px solid var(--border-soft);
}

.compare-table .row-section td {
  background: var(--bg-tinted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.compare-yes {
  color: var(--accent);
  font-weight: 700;
}

.compare-no {
  color: var(--text-subtle);
}

/* ------- FAQ ------- */

.faq {
  display: grid;
  gap: 0.75rem;
  max-width: 48rem;
  margin: 0 auto;
}

.faq details {
  /* background: #fff; */
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.25rem 1.1rem;
  transition: border-color 0.18s ease;
}

.faq details[open] {
  border-color: var(--border-strong);
}

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 0.95rem 0;
  font-weight: 600;
  font-size: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  font-size: 1.4rem;
  color: var(--text-muted);
  font-weight: 400;
  transition: transform 0.2s ease;
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq details > p {
  margin: 0 0 1rem;
  color: var(--text-muted);
  line-height: 1.6;
  font-size: 0.95rem;
}

/* ------- Final CTA ------- */

.cta-band {
  padding: 4.5rem 0 5.5rem;
}

.cta-card {
  position: relative;
  background:
    radial-gradient(circle at 0% 0%, var(--cta-bg-1), transparent 85%),
    radial-gradient(circle at 100% 100%, var(--cta-bg-2), transparent 85%),
    var(--cta-bg-base);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-xl);
  padding: 3rem 3rem 2.75rem;
  text-align: center;
  box-shadow: var(--shadow-md);
}

.cta-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch' seed='5'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.8' intercept='-0.7'/%3E%3CfeFuncG type='linear' slope='2.8' intercept='-0.7'/%3E%3CfeFuncB type='linear' slope='2.8' intercept='-0.7'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix values='0.7 0 0 0 0.3 0.75 0 0 0 0.1 0.7 0 0 0 0.05 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 300px;
  border-radius: inherit;
  opacity: 0.4;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}

.cta-card > * {
  position: relative;
  z-index: 1;
}

.cta-card h2 {
  font-size: clamp(2.1rem, 3.5vw, 3.1rem);
  letter-spacing: -0.05em;
  margin: 0 0 0.7rem;
}

.page-home .cta-card h2 {
  font-size: clamp(2.2rem, 3.8vw, 3.3rem);
}

.cta-card p {
  color: var(--text);
  max-width: 40rem;
  margin: 0 auto 1.7rem;
  font-size: 1.2rem;
  line-height: 1.1;
  display: inline-block;
  padding: 0.7rem 1.8rem;
}

.cta-card .hero-actions {
  justify-content: center;
}

.cta-accent {
  background: linear-gradient(
    345deg,
    var(--text-subtle) 0%,
    var(--accent) 40%,
    var(--accent-strong) 60%,
    var(--text-subtle) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
  font-size: 1.1em;
  letter-spacing: -0.03em;
}

/* ------- Footer ------- */

.footer {
  border-top: 1px solid var(--border-soft);
  padding: 2rem 0;
  font-size: 0.88rem;
  color: var(--text-muted);
  background: var(--bg);
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer-links {
  display: flex;
  gap: 1.5rem;
}

.footer-links a {
  color: var(--text-muted);
}

/* ------- Modal/dialog ------- */

dialog {
  border: none;
  border-radius: var(--radius-lg);
  padding: 0;
  max-width: 700px;
  width: 92%;
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  background: var(--card);
  color: var(--text);
}

dialog::backdrop {
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
}

.dialog-content {
  padding: 2rem 2rem 1.75rem;
}

.dialog-header {
  margin-bottom: 1.4rem;
}

.dialog-title {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0 0 0.35rem;
  color: var(--text);
}

.dialog-subtitle {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.form-group {
  margin-bottom: 1rem;
}

.form-label {
  display: block;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 0.4rem;
}

.form-input,
.form-textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--card) 88%, var(--bg));
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-subtle);
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.form-textarea {
  resize: vertical;
  min-height: 90px;
  line-height: 1.55;
}

.form-actions {
  display: flex;
  gap: 0.65rem;
  margin-top: 1.4rem;
  justify-content: flex-end;
}

.success-message {
  text-align: center;
  padding: 1rem 0.5rem;
}

.success-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  background: var(--accent-tint);
  color: var(--accent);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  font-weight: 600;
}

.success-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
  color: var(--text);
}

.success-text {
  color: var(--text-muted);
  margin: 0 0 1.4rem;
  font-size: 0.95rem;
}

/* ------- Multi-step demo-request form -------
   The schedule-a-demo modal is split into two steps: commitment fields first
   (name / email / company) and qualifying questions second. The dialog meta-
   demos the kind of form polish GF builds — progress bar, paired-field rows,
   conditional follow-up reveal, and a visible submit-pending state. */

.dialog-stepper {
  display: flex;
  gap: 0.65rem;
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
}

.dialog-stepper-step {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.dialog-stepper-step::before {
  content: "";
  display: block;
  height: 3px;
  background: var(--border);
  border-radius: 999px;
  transition: background-color 0.25s ease;
}

.dialog-stepper-step.is-active::before,
.dialog-stepper-step.is-complete::before {
  background: var(--accent);
}

.dialog-stepper-label {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-subtle);
  transition: color 0.25s ease;
}

.dialog-stepper-step.is-active .dialog-stepper-label {
  color: var(--text);
}

.dialog-stepper-step.is-complete .dialog-stepper-label {
  color: var(--text-muted);
}

.form-step {
  display: none;
}

.form-step.is-active {
  display: block;
  animation: form-step-in 0.22s ease;
}

@keyframes form-step-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 0.75rem;
}

.form-group.is-conditional {
  animation: form-step-in 0.22s ease;
}

.form-group.is-conditional[hidden] {
  display: none;
}

/* Segmented control — adapted from the Platform tabs nav. Uses real radio
   inputs (visually hidden) so the value participates in form submission. */
.form-segmented {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  padding: 4px;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-tinted);
  box-shadow: var(--shadow-xs);
}

.form-segmented::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 16px) / 3);
  background: var(--accent-strong);
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.06);
  transform: translateX(0);
  opacity: 0;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s ease;
  will-change: transform;
  z-index: 0;
  pointer-events: none;
}

.form-segmented[data-active-index="0"]::before { transform: translateX(0); opacity: 1; }
.form-segmented[data-active-index="1"]::before { transform: translateX(calc(100% + 4px)); opacity: 1; }
.form-segmented[data-active-index="2"]::before { transform: translateX(calc(200% + 8px)); opacity: 1; }

.form-segmented-option {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.5rem;
  border-radius: 5px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  transition: color 0.18s ease, background-color 0.18s ease;
  user-select: none;
}

.form-segmented-option > input[type="radio"] {
  /* Stretched-over-label rather than clipped, so reportValidity's popup
     anchors over the option instead of an off-screen 1px box. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.form-segmented-option:hover:not(:has(input:checked)) {
  color: var(--text);
}

.form-segmented-option:has(input:checked) {
  color: var(--accent-text);
}

.form-segmented-option:focus-within {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-border), 0 0 0 4px var(--accent-soft);
}

[data-step-submit].is-sending {
  pointer-events: none;
  opacity: 0.88;
}

[data-step-submit].is-sending::before {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-right: 0.5rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  vertical-align: -0.08em;
  animation: form-submit-spin 0.7s linear infinite;
}

@keyframes form-submit-spin {
  to { transform: rotate(360deg); }
}

[data-step-submit].is-sent {
  pointer-events: none;
  background: var(--success-color);
  color: var(--success-bg);
  border-color: var(--success-color);
}

/* .btn sets display: inline-flex, which beats the [hidden] attribute's
   default rule. Re-assert hiding for the step-nav buttons. */
.form-actions .btn[hidden] {
  display: none;
}

@media (max-width: 540px) {
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

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

@media (max-width: 960px) {
  .hero-inner,
  .feature-split-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }

  .platform-tabs-nav-wrap,
  .feature-split.is-reverse .platform-tabs-nav-wrap {
    max-width: none;
    width: 100%;
  }

  .qualifier-layout,
  .form-feature-layout,
  .comparison-row,
  .boundary-slab,
  .duality-split,
  .duality-flipped {
    grid-template-columns: minmax(0, 1fr);
  }

  .comparison-divider {
    display: none;
  }

  .boundary-pane + .boundary-pane,
  .duality-pane + .duality-pane {
    border-left: none;
    border-top: 1px solid var(--border-soft);
  }

  /* On narrow screens the boundary panes stack vertically; the sliding
     indicator's translateX no longer aligns with the active pane, so hide
     it and let the active pane carry its own background instead. */
  .boundary-slab::before {
    display: none;
  }

  .boundary-pane.is-active {
    background: var(--accent-strong);
  }

  .duality-flipped-stack .duality-pane + .duality-pane {
    border-top: none;
  }

  .duality-flipped-header,
  .duality-flipped-stack {
    order: 0;
  }

  .feature-split.is-reverse .feature-split-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .feature-split.is-reverse .feature-split-left,
  .feature-split.is-reverse .feature-split-right {
    order: 0;
  }

  .pricing-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .compare-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

@media (max-width: 768px) {
  .mobile-menu-toggle {
    display: block;
  }

  .nav-links {
    position: fixed;
    inset: 64px 0 auto 0;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.25rem 1.5rem;
    background: var(--nav-bg);
    backdrop-filter: blur(14px) saturate(180%);
    border-bottom: 1px solid var(--border-soft);
    box-shadow: var(--shadow-md);
    transform: translateY(-110%);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
    pointer-events: none;
  }

  .nav-links.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .nav-link {
    width: 100%;
    padding: 0.75rem 0.25rem;
  }

  .nav-cta {
    width: 100%;
    justify-content: center;
    padding: 0.85rem 1rem;
  }

  .hero { padding: 4rem 0 3rem; }
  .section { padding: 3.5rem 0; }
  .feature-split { padding: 3.5rem 0; }
  .platform-bridge { padding: 5rem 0 4.6rem; }
  .platform-bridge-svg--left {
    left: -3.5rem;
    width: 380px;
    opacity: 0.22;
  }
  .platform-bridge-svg--right {
    right: -3.25rem;
    bottom: 0.15rem;
    width: 400px;
    opacity: 0.22;
  }
  .cta-card { padding: 2rem 1.5rem; }
}

@media (max-width: 540px) {
  .platform-bridge-svg--left {
    top: 0.15rem;
    left: -4.75rem;
    width: 310px;
    opacity: 0.18;
  }

  .platform-bridge-svg--right {
    right: -4.75rem;
    bottom: 0.1rem;
    width: 320px;
    opacity: 0.18;
  }

  .hero-mock-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero-mock-row-head {
    display: none;
  }
  .hero-mock-grid,
  .hero-mock-row-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-mock-steps {
    gap: 0.3rem;
  }

  .hero-mock-step {
    min-width: 0;
    gap: 0.3rem;
  }

  .hero-mock-step-label {
    font-size: 0.68rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }


  .hero-mock-form {
    --hero-pane-height: 0px;
  }

  .hero-mock-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .hero-mock-header {
    align-items: flex-start;
    gap: 0.5rem;
  }

  .hero-mock-titlebar {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-mock-actions-top {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .hero-mock-actions-bottom {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .hero-mock-pane[data-hero-pane="3"] .hero-mock-actions-top {
    display: inline-flex;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .hero-mock-footer {
    align-items: flex-end;
    flex-direction: column;
  }

  .hero-mock-summary-links {
    width: 100%;
    justify-content: flex-start;
    min-width: 0;
  }

  .hero-mock-table {
    font-size: 0.78rem;
  }

  /* Hero body and pane: tighter on phones so more form content fits without
     horizontal pressure. */
  .hero-mock-body {
    padding: 1rem 0.85rem 0.65rem;
  }
  .hero-mock-pane {
    padding: 0.55rem;
  }

  /* Step nav: hide labels, show only the numbered circles distributed across
     the width. Labels were truncating to "Freigh…", "Insura…", "Volum…",
     "Appro…" which read worse than the numbers alone. */
  .hero-mock-step-label {
    display: none;
  }
  .hero-mock-steps {
    justify-content: space-between;
    gap: 0.5rem;
  }
  .hero-mock-step {
    flex: 0 0 auto;
    justify-content: center;
    gap: 0;
  }

  /* Step 2 (Insurance): the yes/no toggle and the "$5M umbrella coverage"
     notice are side-by-side via inline styles on desktop; stack them on phones
     so neither truncates. Targets the inline-styled flex row by attribute. */
  .hero-mock-pane[data-hero-pane="2"] .hero-mock-field > div[style*="flex"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Step 3 (Volume Plan): the section header packs "First year volume plan"
     + commitment chip + "Add Line Item" button on one row — stacks them so
     the add button doesn't wrap one word per line. */
  .hero-mock-pane[data-hero-pane="3"] > .hero-mock-section-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }

  /* Step 4 (Approvals): the role grid is 2-col on desktop and the role labels
     wrap awkwardly (e.g. "Operations\nTeam"). Single-col reads cleanly. */
  .hero-mock-approval-row {
    grid-template-columns: 1fr;
  }
}

/* ========================================================================
   Use Cases page: Customer Implementations mock
   ======================================================================== */

.editor-mock--use-case-impl {
  position: relative;
}

.editor-mock--use-case-impl .editor-mock-body {
  grid-template-columns: minmax(0, 1fr);
}

.uc-impl-mock-content {
  padding: 1.1rem 1.2rem;
  background: var(--bg-tinted);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  font-family: 'Inter', sans-serif;
  color: var(--text);
  min-width: 0;
}

.editor-mock--use-case-impl .uc-impl-mock-subtitle {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
}


.editor-mock--use-case-impl .mock-divider {
  margin: 0;
}

.uc-impl-mock-table {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.uc-impl-mock-row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 0.8fr) minmax(0, 1.1fr);
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  align-items: center;
  font-size: 0.72rem;
  border-bottom: 1px solid var(--border-soft);
  min-width: 0;
}

.uc-impl-mock-row:last-child {
  border-bottom: 0;
}

.uc-impl-mock-row--head {
  background: var(--bg-alt);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-subtle);
  font-weight: 600;
}

.uc-impl-mock-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.uc-impl-mock-cell--name {
  color: var(--text);
  font-weight: 500;
}

.uc-impl-mock-cell--meta {
  color: var(--text-muted);
}

/* Modal overlay positioning inside the use case mock */
.editor-mock--use-case-impl .app-mock-modal-layer {
  align-items: center;
  padding-top: 0;
}

.editor-mock--use-case-impl .app-mock-modal {
  width: min(470px, calc(100% - 1.5rem));
  padding: 0.85rem 1rem 0.95rem;
}

.editor-mock--use-case-impl .app-mock-modal-title {
  font-size: 0.85rem;
}

.editor-mock--use-case-impl .app-mock-modal-grid {
  gap: 0.55rem;
  margin-top: 0.65rem;
}

.editor-mock--use-case-impl .app-mock-modal-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
}

.editor-mock--use-case-impl .app-mock-modal-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.38rem 0.5rem;
  font-size: 0.74rem;
}

.editor-mock--use-case-impl .app-mock-modal input {
  pointer-events: none;
}

.editor-mock--use-case-impl .app-mock-modal-input--lookup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  color: var(--text);
}

.editor-mock--use-case-impl .app-mock-modal-input--lookup svg {
  width: 10px;
  height: 10px;
  color: var(--text-subtle);
  flex-shrink: 0;
}

/* Customer field: open lookup with results dropdown. Sized to match the
   other compact modal inputs; dropdown projects below the modal box. */
.editor-mock--use-case-impl .uc-impl-quote-lookup .form-mock-input {
  padding: 0.38rem 0.5rem;
  font-size: 0.74rem;
  background: var(--card);
}

.editor-mock--use-case-impl .uc-impl-quote-lookup .form-mock-lookup-result {
  font-size: 0.74rem;
  padding: 0.36rem 0.6rem;
}

.editor-mock--use-case-impl .uc-impl-quote-lookup .form-mock-lookup-results {
  max-height: none;
  overflow: visible;
}

.editor-mock--use-case-impl .uc-impl-quote-lookup .form-mock-lookup-results::after {
  display: none;
}

.editor-mock--use-case-impl .uc-impl-quote-lookup .form-mock-lookup-actions {
  padding: 0.4rem 0.6rem;
}

.editor-mock--use-case-impl .uc-impl-quote-lookup .form-mock-lookup-result > span {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ========================================================================
   Use Cases page: Warranty Claim Approval mock
   ======================================================================== */

/* Action row: decision + Exception Notes; reuses home-quote-* with our context overrides */
.editor-mock--use-case-warranty .home-quote-action-row {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.editor-mock--use-case-warranty .home-quote-decision {
  margin-top: 0;
}

.editor-mock--use-case-warranty .home-quote-action-row .home-quote-decision-btn {
  padding: 0.42rem 0.4rem;
  font-size: 0.74rem;
}

.editor-mock--use-case-warranty .home-quote-notes {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.editor-mock--use-case-warranty .home-quote-notes-input {
  font-size: 0.76rem;
  pointer-events: none;
  resize: none;
}

.editor-mock--use-case-warranty .home-quote-decision-btn {
  pointer-events: none;
}

.editor-mock--use-case-warranty .home-quote-detail {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.editor-mock--use-case-warranty .home-quote-detail-label {
  font-size: 0.6rem;
}

.editor-mock--use-case-warranty .home-quote-detail-value {
  font-size: 0.78rem;
}

.editor-mock--use-case-warranty .uc-warranty-required-note {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--accent-tint);
  color: var(--text);
  border: 1px solid var(--accent-border);
  border-radius: 4px;
  padding: 0.26rem 0.3rem 0.26rem 0.3rem;
  font-size: 0.66rem;
  font-weight: 500;
  margin-top: 0.1rem;
  line-height: 1.3;
  align-self: stretch;
}

.editor-mock--use-case-warranty .uc-warranty-required-note svg {
  width: 12px;
  height: 12px;
  color: var(--accent-strong);
  flex-shrink: 0;
}

/* Past claims read-only table (4-column) */
.uc-warranty-claims-table {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 0.2rem;
  font-size: 0.76rem;
  color: var(--text);
}

.uc-warranty-claims-row {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr) minmax(0, 0.7fr) minmax(0, 1.5fr);
  gap: 0.5rem;
  padding: 0.42rem 0.6rem;
  border-bottom: 1px solid var(--border-soft);
  align-items: center;
}

.uc-warranty-claims-row:last-child {
  border-bottom: 0;
}

.uc-warranty-claims-row--head {
  background: var(--bg-alt);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-subtle);
  font-weight: 600;
}

.uc-warranty-claims-row > span:nth-child(1),
.uc-warranty-claims-row > span:nth-child(3),
.uc-warranty-claims-row > span:nth-child(4) {
  color: var(--text-muted);
}

.uc-warranty-claims-row--head > span {
  color: var(--text-subtle);
}

/* ========================================================================
   Use Cases page: Vendor Onboarding continuous-form mock
   ======================================================================== */

.uc-vendor-subtitle {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.uc-vendor-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.uc-vendor-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 0.9rem;
  padding: 0.48rem 0.9rem;
  align-items: start;
}

.uc-vendor-row + .uc-vendor-row {
  border-top: 1px solid var(--border);
}

.uc-vendor-row-info {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  min-width: 0;
}

.uc-vendor-row-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  min-width: 0;
}

.uc-vendor-row-title {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text);
}

.uc-vendor-row-byline {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.uc-vendor-row-approvers {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
  min-width: 0;
}

.uc-vendor-row-head .hero-mock-chip,
.uc-vendor-row-approvers .hero-mock-chip {
  font-size: 0.6rem;
  padding: 0.12rem 0.42rem;
  gap: 0.25rem;
}

.uc-vendor-row-risks {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  font-size: 0.7rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.uc-vendor-row-risks-label {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--text-subtle);
  margin-right: 0.5rem;
}

.uc-vendor-row-risks-item {
  white-space: nowrap;
}

.uc-vendor-row-risks-item + .uc-vendor-row-risks-item::before {
  content: "·";
  color: var(--text-subtle);
  padding: 0 0.35rem;
}

.uc-vendor-row-edit {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 0.9rem;
  border-left: 1px solid var(--border-soft);
}

.uc-vendor-edit-field {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
}

.uc-vendor-edit-label {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-subtle);
  font-weight: 600;
}

.uc-vendor-edit-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.uc-vendor-edit-row .uc-vendor-edit-input {
  flex: 1;
  min-width: 0;
}

.uc-vendor-edit-row .uc-vendor-edit-check {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  flex-shrink: 0;
}

.uc-vendor-edit-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.32rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--card);
  font-size: 0.72rem;
  color: var(--text);
  pointer-events: none;
}

.uc-vendor-edit-input--placeholder {
  color: var(--text-subtle);
  font-weight: 400;
}

.uc-vendor-edit-input svg {
  width: 10px;
  height: 10px;
  color: var(--text-subtle);
  flex-shrink: 0;
}

.uc-vendor-edit-check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.15rem;
  padding-top: 0.45rem;
  border-top: 1px dashed var(--border-soft);
  font-size: 0.72rem;
  color: var(--text);
  font-weight: 500;
}

.uc-vendor-edit-field.is-disabled .uc-vendor-edit-label {
  color: var(--text-subtle);
  opacity: 0.7;
}

.uc-vendor-edit-input.is-disabled {
  background: var(--bg-tinted);
  border-color: var(--border-soft);
  color: var(--text-subtle);
}

.uc-vendor-edit-input.is-disabled svg {
  opacity: 0.45;
}

.uc-vendor-edit-check.is-disabled {
  color: var(--text-subtle);
}

.uc-vendor-edit-check.is-disabled .form-mock-checkbox-box {
  background: var(--bg-tinted);
  border-color: var(--border-soft);
}

/* --- Use Case: Product Evaluation --- */

.editor-mock--use-case-eval .perm-mock-save,
.editor-mock--use-case-eval .perm-mock-back,
.editor-mock--use-case-eval button {
  pointer-events: none;
}

.editor-mock--use-case-eval .app-mock-page-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.editor-mock--use-case-eval .uc-eval-stage-chip {
  font-size: 0.6rem;
  padding: 0.12rem 0.45rem;
}

.editor-mock--use-case-eval .form-mock {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.editor-mock--use-case-eval .form-mock-stacked {
  gap: 0.18rem;
}

.editor-mock--use-case-eval .uc-eval-subrow {
  display: flex;
  gap: 0.6rem;
  min-width: 0;
}

.editor-mock--use-case-eval .uc-eval-spec-name {
  font-weight: 600;
  color: var(--text);
}

.editor-mock--use-case-eval .uc-eval-stepper {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
  color: var(--text-subtle);
  padding-left: 0.3rem;
  margin-left: 0.05rem;
  border-left: 1px solid var(--border-soft);
}

.editor-mock--use-case-eval .uc-eval-stepper svg {
  width: 9px;
  height: 6px;
  display: block;
}

.editor-mock--use-case-eval .uc-eval-pass-head,
.editor-mock--use-case-eval .uc-eval-pass-cell {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Use Case: Demo & Loaner Unit Coordination --- */

.editor-mock--use-case-loaner .perm-mock-save,
.editor-mock--use-case-loaner .perm-mock-back,
.editor-mock--use-case-loaner button {
  pointer-events: none;
}

.editor-mock--use-case-loaner .app-mock-page-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.editor-mock--use-case-loaner .uc-loaner-stage-chip {
  font-size: 0.6rem;
  padding: 0.12rem 0.45rem;
}

.editor-mock--use-case-loaner .uc-loaner-subtitle {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.editor-mock--use-case-loaner .form-mock {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.editor-mock--use-case-loaner .uc-loaner-file-row {
  padding: 0.32rem 0.42rem 0.32rem 0.5rem;
  gap: 0.55rem;
}

.editor-mock--use-case-loaner .uc-loaner-file-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-strong);
  flex-shrink: 0;
}

.editor-mock--use-case-loaner .uc-loaner-file-icon svg {
  width: 14px;
  height: 16px;
}

.editor-mock--use-case-loaner .hero-mock-file-name {
  font-size: 0.75rem;
  color: var(--text);
  flex: 1;
}

.editor-mock--use-case-loaner .uc-loaner-file-meta {
  font-size: 0.66rem;
  color: var(--text-subtle);
  flex-shrink: 0;
  white-space: nowrap;
}

.editor-mock--use-case-loaner .hero-mock-file-btn {
  font-size: 0.7rem;
  padding: 0.26rem 0.55rem;
}

.editor-mock--use-case-loaner .form-mock-checkbox {
  font-size: 0.74rem;
}

/* --- Use Case: Custom Quotes --- */

.editor-mock--use-case-quote .perm-mock-save,
.editor-mock--use-case-quote .perm-mock-back,
.editor-mock--use-case-quote button {
  pointer-events: none;
}

.editor-mock--use-case-quote .uc-quote-subtitle {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.editor-mock--use-case-quote .form-mock {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.editor-mock--use-case-quote .form-mock-stacked {
  gap: 0.18rem;
}

.editor-mock--use-case-quote .uc-quote-disabled-input {
  background: var(--bg-tinted);
  color: var(--text-muted);
}

.editor-mock--use-case-quote .uc-quote-num-head {
  text-align: right;
}

.editor-mock--use-case-quote .uc-quote-cell-num {
  justify-content: flex-end;
  text-align: right;
}

.editor-mock--use-case-quote .uc-quote-cell-num > span {
  flex: 0 0 auto;
}

.editor-mock--use-case-quote .uc-quote-cell-num--alert {
  border-color: var(--warn-border);
  background: var(--warn-bg);
  color: var(--warn-color);
  font-weight: 600;
  gap: 0.25rem;
}

.editor-mock--use-case-quote .uc-quote-cell-num--alert svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

.editor-mock--use-case-quote .uc-quote-line-total {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-weight: 500;
  align-self: center;
  justify-self: end;
}

.editor-mock--use-case-quote .uc-quote-unit-price {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  align-self: center;
  justify-self: end;
}

.editor-mock--use-case-quote .uc-quote-row-actions {
  align-self: center;
  justify-self: end;
}

.editor-mock--use-case-quote .launch-mock-subform-row {
  gap: 0.35rem;
  align-items: center;
}

.editor-mock--use-case-quote .uc-quote-cell-num--info {
  justify-content: space-between;
}

.editor-mock--use-case-quote .uc-quote-cell-num--info svg {
  width: 11px;
  height: 11px;
  color: var(--text-subtle);
  flex-shrink: 0;
}

.editor-mock--use-case-quote .uc-quote-aggregate {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.5rem 0.1rem 0.1rem;
  margin-top: 0.2rem;
  border-top: 1px solid var(--border-soft);
  font-size: 0.72rem;
}

.editor-mock--use-case-quote .uc-quote-aggregate-label {
  color: var(--text-muted);
}

.editor-mock--use-case-quote .uc-quote-aggregate-value {
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.editor-mock--use-case-quote .uc-quote-aggregate-value--warn {
  color: var(--warn-color);
}

.editor-mock--use-case-quote .uc-quote-aggregate-sep {
  color: var(--text-subtle);
}

.editor-mock--use-case-quote .uc-quote-aggregate-chip {
  margin-left: auto;
  font-size: 0.6rem;
  padding: 0.12rem 0.45rem;
}

.editor-mock--use-case-quote .uc-quote-info-notice,
.hero-mock .uc-quote-info-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  padding: 0.42rem 0.6rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 0.7rem;
  line-height: 1.4;
}

.editor-mock--use-case-quote .uc-quote-info-notice-icon,
.hero-mock .uc-quote-info-notice-icon {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-top: 0.1rem;
  color: var(--text-subtle);
}

.editor-mock--use-case-quote .uc-quote-info-notice strong,
.hero-mock .uc-quote-info-notice strong {
  color: var(--text);
  font-weight: 600;
}

/* Truncate the hero mock's coverage notice to 3 lines (full text shown via
   the parent's title attribute on hover). -webkit-line-clamp + display:
   -webkit-box is the cross-browser multi-line ellipsis pattern. min-width:0
   lets the flex child shrink so wrapping engages. */
.hero-mock-coverage-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-width: 0;
}

/* --- Use Case: Contract Renewals --- */

.editor-mock--use-case-renewal {
  position: relative;
}

.editor-mock--use-case-renewal .perm-mock-back,
.editor-mock--use-case-renewal button {
  pointer-events: none;
}

.editor-mock--use-case-renewal .uc-renewal-subtitle {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.editor-mock--use-case-renewal .uc-renewal-title-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.editor-mock--use-case-renewal .uc-renewal-stage-chip {
  font-size: 0.6rem;
  padding: 0.12rem 0.45rem;
}

.editor-mock--use-case-renewal .uc-renewal-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 0.2rem;
}

.editor-mock--use-case-renewal .uc-renewal-stat {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  padding: 0.45rem 0.6rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
  min-width: 0;
}

.editor-mock--use-case-renewal .uc-renewal-stat-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.editor-mock--use-case-renewal .uc-renewal-stat-label {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-subtle);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.editor-mock--use-case-renewal .uc-renewal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 0.55rem;
  margin-top: 0.2rem;
}

.editor-mock--use-case-renewal .uc-renewal-tabs {
  margin-top: 0.2rem;
  margin-bottom: 0;
}

.editor-mock--use-case-renewal .uc-renewal-tabs .app-mock-tab {
  padding: 0.35rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 500;
  pointer-events: none;
}

.editor-mock--use-case-renewal .uc-renewal-card {
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  background: var(--card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.editor-mock--use-case-renewal .uc-renewal-card--active {
  border-color: var(--accent-border);
  background: var(--accent-tint);
}

.editor-mock--use-case-renewal .uc-renewal-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-tinted);
}

.editor-mock--use-case-renewal .uc-renewal-card--active .uc-renewal-card-head {
  background: transparent;
  border-bottom-color: var(--accent-border);
}

.editor-mock--use-case-renewal .uc-renewal-card-title {
  font-size: 0.78rem;
  font-weight: 700;
  margin: 0;
  color: var(--text);
}

.editor-mock--use-case-renewal .uc-renewal-team-tag {
  display: inline-block;
  padding: 0.14rem 0.55rem;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--accent-text);
  white-space: nowrap;
  line-height: 1.1;
  flex-shrink: 0;
}

.editor-mock--use-case-renewal .uc-renewal-card-body {
  padding: 0.42rem 0.6rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
}

.editor-mock--use-case-renewal .uc-renewal-kv {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.7rem;
  line-height: 1.35;
  min-width: 0;
}

.editor-mock--use-case-renewal .uc-renewal-k {
  color: var(--text-muted);
  flex-shrink: 0;
  white-space: nowrap;
}

.editor-mock--use-case-renewal .uc-renewal-v {
  color: var(--text);
  text-align: right;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.editor-mock--use-case-renewal .uc-renewal-card-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}


.editor-mock--use-case-renewal .uc-renewal-card-head {
  min-width: 0;
}

/* Modal layer: small, inset, doesn't fully cover the backdrop */
.editor-mock--use-case-renewal .uc-renewal-modal-layer {
  align-items: center;
  justify-content: center;
  padding-top: 0;
  background: rgba(20, 22, 28, 0.06);
  pointer-events: none;
}

.editor-mock--use-case-renewal .uc-renewal-modal {
  width: 60%;
  max-width: 320px;
  padding: 0.7rem 0.85rem 0.85rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
  pointer-events: none;
}

.editor-mock--use-case-renewal .uc-renewal-modal .app-mock-modal-head {
  padding: 0;
}

.editor-mock--use-case-renewal .uc-renewal-modal .app-mock-modal-title {
  font-size: 0.84rem;
}

.editor-mock--use-case-renewal .uc-renewal-modal .app-mock-modal-btn {
  pointer-events: none;
}

.editor-mock--use-case-renewal .uc-renewal-modal .mock-divider {
  margin: 0.45rem 0;
}

.editor-mock--use-case-renewal .uc-renewal-modal-body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.editor-mock--use-case-renewal .uc-renewal-modal-body .app-mock-modal-label {
  font-size: 0.66rem;
  color: var(--text-muted);
  font-weight: 500;
  display: block;
  margin-bottom: 0.22rem;
}

.editor-mock--use-case-quote .form-mock-validation {
  padding: 0.45rem 0.6rem;
  font-size: 0.7rem;
}

.editor-mock--use-case-quote .form-mock-validation-icon {
  width: 13px;
  height: 13px;
  margin-top: 0.1rem;
}

.editor-mock--use-case-quote .form-mock-validation strong {
  font-weight: 600;
}

.editor-mock--use-case-quote .form-mock-field.is-disabled .form-mock-label {
  color: var(--text-subtle);
}


/* ------- Hero mock guided tour ("outside the fourth wall" tooltip) -------
   Floating bubble that walks visitors through key form interactions on the
   home hero mock. Styled in accent-strong so it reads as meta scaffolding,
   not form chrome. Advances on real input — see hero tour IIFE in scripts.js. */

.hero-tour-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  max-width: 260px;
  padding: 0.75rem 1.6rem 0.6rem 0.95rem;
  background: var(--accent);
  color: var(--accent-text);
  border-radius: 8px;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.14),
    0 18px 42px rgba(0, 0, 0, 0.32),
    0 8px 22px var(--accent-soft);
  font-size: 0.86rem;
  line-height: 1.45;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.hero-tour-tooltip.is-shown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.hero-tour-body strong {
  font-weight: 700;
}

.hero-tour-skip {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
  cursor: pointer;
  text-decoration: underline;
}

.hero-tour-skip:hover { opacity: 1; }

.hero-tour-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: inherit;
  opacity: 0.6;
  border-radius: 4px;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

.hero-tour-close:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--accent-text) 14%, transparent);
}

.hero-tour-close svg {
  width: 14px;
  height: 14px;
  display: block;
}

.hero-tour-arrow {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--accent);
  transform: rotate(45deg);
}

.hero-tour-tooltip[data-placement="right"] .hero-tour-arrow {
  left: -5px;
  top: 50%;
  margin-top: -6px;
}

.hero-tour-tooltip[data-placement="left"] .hero-tour-arrow {
  right: -5px;
  top: 50%;
  margin-top: -6px;
}

.hero-tour-tooltip[data-placement="top"] .hero-tour-arrow {
  bottom: -5px;
  left: 50%;
  margin-left: -6px;
}

.hero-tour-tooltip[data-placement="bottom"] .hero-tour-arrow {
  top: -5px;
  left: 50%;
  margin-left: -6px;
}

/* Halo on the field the active tour step is pointing at. */
.is-tour-active {
  box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 4px var(--accent);
  border-radius: 6px;
  transition: box-shadow 0.2s ease;
}

/* Override for whole-pane targets that fill the form's scroll area —
   outer shadows get clipped by the scroll area's overflow, so render
   the halo as inset shadows instead (draws inside the pane's box). */
.hero-mock-pane.is-tour-active {
  box-shadow: inset 0 0 0 3px var(--accent);
}

/* Gentle bounce in the direction of the arrow — visually nudges visitor
   toward the target. Most of the cycle is spent in the active motion (long
   ramp + brief hold + long return) so it feels like a slow swell instead
   of a snap. Disabled when reduced-motion is requested. */
@keyframes hero-tour-bounce-right {
  0%, 100% { transform: translateX(0); }
  40%, 60% { transform: translateX(-5px); }
}
@keyframes hero-tour-bounce-left {
  0%, 100% { transform: translateX(0); }
  40%, 60% { transform: translateX(5px); }
}
@keyframes hero-tour-bounce-top {
  0%, 100% { transform: translateY(0); }
  40%, 60% { transform: translateY(5px); }
}
@keyframes hero-tour-bounce-bottom {
  0%, 100% { transform: translateY(0); }
  40%, 60% { transform: translateY(-5px); }
}

.hero-tour-tooltip.is-shown[data-placement="right"]  { animation: hero-tour-bounce-right  3.2s ease-in-out infinite; }
.hero-tour-tooltip.is-shown[data-placement="left"]   { animation: hero-tour-bounce-left   3.2s ease-in-out infinite; }
.hero-tour-tooltip.is-shown[data-placement="top"]    { animation: hero-tour-bounce-top    3.2s ease-in-out infinite; }
.hero-tour-tooltip.is-shown[data-placement="bottom"] { animation: hero-tour-bounce-bottom 3.2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .hero-tour-tooltip.is-shown { animation: none; }
}

/* ---------------------------------------------------------------------------
   Mobile mock swap
   ---------------------------------------------------------------------------
   The product mocks (editor-mock, app-mock, hero-mock, workspace-mock) are
   built as live DOM at desktop dimensions. On phones we swap them for
   pre-captured screenshots — the layout doesn't survive at <500px-ish widths,
   and mobile traffic is credibility-tier (Slack links, eval-on-the-train),
   not evaluation-tier. Each mock is paired with an <img class="mock-mobile-only">
   sibling pointing at a PNG generated by scripts/capture-mocks.mjs.

   720px matches the existing phone breakpoint used elsewhere on the site
   (e.g. precision-listbox-column), and stays above 768px so tablets in
   portrait keep the live desktop experience. See marketing-site-mobile-strategy
   memory for rationale.
   --------------------------------------------------------------------------- */
.mock-mobile-only { display: none; }

@media (max-width: 720px) {
  .mock-desktop-only { display: none !important; }
  .mock-mobile-only  { display: block; width: 100%; height: auto; }
}