@font-face {
  font-family: "Effra";
  src: url("/assets/fonts/Effra.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --font-primary: "Effra", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --palette-nusuq-500: #77a0a2;
  /* The app's widget surface (colors.css): live marketplace previews read these. */
  --nwdg-w-bg: color-mix(in oklch, var(--color-on-surface) 6%, transparent);
  --nwdg-w-border: color-mix(in oklch, var(--color-on-surface) 14%, transparent);
  --palette-neutral-50: #fcfcfc;
  --palette-neutral-100: #f4f6f7;
  --palette-neutral-200: #e7eaec;
  --palette-neutral-300: #c4cbd0;
  --palette-neutral-500: #7a858f;
  --palette-neutral-700: #4c5864;
  --palette-neutral-950: #000813;
  --palette-violet-300: #a495c6;
  --palette-pink-200: #fccce2;
  --palette-cyan-500: #83dfe9;
  --palette-blue-300: #66abe5;
  --palette-green-400: #4ade80;
  --palette-lime-300: #c6e772;
  --palette-yellow-200: #fefeb8;
  --palette-orange-300: #ffb676;
  --palette-red-400: #ff5a5a;

  --color-primary: var(--palette-nusuq-500);
  --color-primary-ink: #365f61;
  --color-on-primary: #fff;
  --color-surface: var(--palette-neutral-50);
  --color-on-surface: var(--palette-neutral-950);
  --color-surface-1: color-mix(in oklch, var(--color-on-surface) 4%, var(--color-surface));
  --color-surface-2: color-mix(in oklch, var(--color-on-surface) 8%, var(--color-surface));
  --color-surface-3: color-mix(in oklch, var(--color-on-surface) 12%, var(--color-surface));
  --color-accent: var(--palette-pink-200);
  --color-info: var(--palette-cyan-500);
  --color-success: var(--palette-lime-300);
  --color-warning: var(--palette-yellow-200);
  --color-highlight: var(--palette-orange-300);
  --color-danger: var(--palette-red-400);
  --text-primary: var(--color-on-surface);
  --text-secondary: color-mix(in oklch, var(--color-on-surface) 72%, transparent);
  --text-muted: color-mix(in oklch, var(--color-on-surface) 58%, transparent);
  --line-soft: color-mix(in oklch, var(--color-on-surface) 10%, transparent);
  --line-strong: color-mix(in oklch, var(--color-on-surface) 17%, transparent);

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --radius-sm: .25rem;
  --radius-md: .5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 2px color-mix(in oklch, var(--color-on-surface) 8%, transparent);
  --shadow-md: 0 4px 12px color-mix(in oklch, var(--color-on-surface) 10%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in oklch, var(--color-on-surface) 14%, transparent);
  --page-gutter: clamp(1.25rem, 4vw, 3.5rem);
  --page: min(1280px, calc(100vw - (var(--page-gutter) * 2)));
  --section-space: clamp(4.5rem, 8vw, 7rem);

  /* Compatibility aliases used by the first local build. */
  --ink: var(--color-on-surface);
  --ink-2: var(--palette-neutral-700);
  --paper: var(--color-surface);
  --paper-2: var(--color-surface-1);
  --white: var(--color-surface);
  --acid: var(--color-primary);
  --coral: var(--color-highlight);
  --blue: var(--palette-blue-300);
  --violet: var(--palette-violet-300);
  --mint: var(--palette-green-400);
  --yellow: var(--color-warning);
  --line: var(--line-soft);
  --muted: var(--text-muted);
  --radius: var(--radius-xl);
  --shadow: var(--shadow-lg);
}

/* Scrollbars are drawn by assets/overlay-scrollbars.js, like the app's: every native
   bar is hidden (scrollbar-width does not inherit, hence the universal selector) and a
   slim thumb is drawn over the container. See the .ovs-thumb block below. */
* { scrollbar-width: none; }
nusuq-widget, nusuq-widget * { scrollbar-width: none; scrollbar-color: transparent transparent; }
body,
.inner-page {
  color: var(--text-primary);
  background: var(--color-surface);
  font-family: var(--font-primary);
  letter-spacing: 0;
}
button,
input,
select,
textarea { font-family: var(--font-primary); }
/* A textarea is not resizable until its rule says so (as in the app); the ones
   that are get the app's managed corner grip from nusuq-controls.js. The grip's
   geometry is !important because a `background` shorthand elsewhere resets it.
   Copied from the app's 02-typography-defaults.css; keep the two in step. */
:where(textarea) { resize: none; }
textarea.nusuq-resizable-textarea {
  --nusuq-grip: color-mix(in oklch, var(--color-on-surface) 35%, transparent);
  resize: none !important;
  background-image:
    linear-gradient(135deg, transparent 46%, var(--nusuq-grip) 47% 53%, transparent 54%),
    linear-gradient(135deg, transparent 46%, var(--nusuq-grip) 47% 53%, transparent 54%) !important;
  background-position: right 5px bottom 5px, right 5px bottom 5px !important;
  background-size: 10px 10px, 6px 6px !important;
  background-repeat: no-repeat !important;
}
textarea.nusuq-resizable-textarea:hover,
textarea.nusuq-resizable-textarea:focus,
textarea.nusuq-resizable-textarea.is-resizing { --nusuq-grip: var(--color-primary-ink); }
textarea.nusuq-resizable-textarea.is-resize-hover,
textarea.nusuq-resizable-textarea.is-resizing { cursor: nwse-resize; }
textarea.nusuq-resizable-textarea[data-resize-direction="vertical"].is-resize-hover,
textarea.nusuq-resizable-textarea[data-resize-direction="vertical"].is-resizing { cursor: ns-resize; }
textarea.nusuq-resizable-textarea[data-resize-direction="horizontal"].is-resize-hover,
textarea.nusuq-resizable-textarea[data-resize-direction="horizontal"].is-resizing { cursor: ew-resize; }
textarea.nusuq-resizable-textarea:disabled,
textarea.nusuq-resizable-textarea[readonly] { background-image: none !important; cursor: default; }
.svg-glyph {
  width: 1em;
  height: 1em;
  display: inline-block;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -.125em;
  transform-origin: center;
}
[dir="rtl"] .rtl-flip { transform: scaleX(-1); }
::selection { color: var(--color-on-primary); background: var(--color-primary); }
:focus-visible { outline: 2px solid color-mix(in oklch, var(--color-primary) 70%, transparent); outline-offset: 2px; }

.site-header {
  position: sticky;
  top: 0;
  height: 64px;
  width: 100%;
  margin: 0;
  padding-inline: max(var(--page-gutter), calc((100vw - 1280px) / 2));
  border-bottom-color: var(--line-soft);
  background: color-mix(in oklch, var(--color-surface) 90%, transparent);
  backdrop-filter: blur(16px);
}
#site-header-root { display: contents; }
html { scroll-padding-top: 80px; }
.header-actions .button { height: 32px; min-height: 32px; padding-block: 0; }
.brand { gap: .5rem; font-size: 1.125rem; font-weight: 700; letter-spacing: .01em; }
.brand-mark { width: 30px; height: 30px; border-radius: var(--radius-md); background: transparent; }
.site-nav { gap: .125rem; }
.site-nav a,
.text-link { color: var(--text-secondary); font-size: .875rem; font-weight: 500; }
.text-link:hover { color: var(--color-primary-ink); opacity: 1; }
/* Chips, like the app's editor ribbon tabs (Sheets .sh-tab): a soft fill on
   hover, and the page you're on (site-chrome.js marks it aria-current) as a
   primary-tinted chip — clearer than a colour change alone. */
.site-nav > a {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: .35rem .75rem;
  border-radius: var(--radius-md);
  line-height: 1.4;
  transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.site-nav > a:hover { color: var(--text-primary); background: color-mix(in oklch, var(--color-on-surface) 7%, transparent); opacity: 1; }
.site-nav > a:active { transform: scale(.97); }
.site-nav > a:focus-visible { outline: 0; box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary) 28%, transparent); }
.site-nav > a[aria-current="page"] {
  color: var(--color-primary-ink);
  background: color-mix(in oklch, var(--color-primary) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-primary) 14%, transparent);
}
.nav-menu-foot { display: none; }
.header-actions { gap: var(--space-3); }
.language-button {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  background: transparent;
  cursor: pointer;
  font-weight: 600;
}
.language-button:hover { color: var(--color-primary-ink); border-color: var(--color-primary); background: color-mix(in oklch, var(--color-primary) 8%, transparent); }

.button {
  min-height: 40px;
  padding-inline: .875rem;
  gap: .5rem;
  border-radius: var(--radius-md);
  font-size: .875rem;
  font-weight: 500;
  box-shadow: none;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease, transform 120ms ease;
}
.button:hover { transform: translateY(-1px); box-shadow: none; }
.button:active { transform: translateY(1px); }
.button-dark,
.button-acid { color: var(--color-on-primary); border-color: var(--color-primary); background: var(--color-primary); box-shadow: none; }
.button-dark:hover,
.button-acid:hover { color: var(--color-on-primary); background: color-mix(in oklch, var(--color-primary) 84%, var(--color-on-surface)); box-shadow: none; }
.button-quiet,
.button-outline,
.button-light { color: var(--text-secondary); border-color: var(--line-strong); background: transparent; }
.button-quiet:hover,
.button-outline:hover,
.button-light:hover { color: var(--color-primary-ink); border-color: var(--color-primary); background: color-mix(in oklch, var(--color-primary) 8%, transparent); }
.play { color: var(--color-on-primary); background: var(--color-primary); }
.play .svg-glyph { width: .75rem; height: .75rem; }
kbd { display: inline-flex; align-items: center; gap: .15rem; }
kbd .svg-glyph { width: .7rem; height: .7rem; }

.hero { padding-top: var(--space-8); background: linear-gradient(180deg, color-mix(in oklch, var(--color-primary) 6%, var(--color-surface)), var(--color-surface) 46%); }
.hero::after { background: none; }
.hero-halo-one { background: radial-gradient(circle, color-mix(in oklch, var(--color-primary) 18%, transparent), transparent 68%); }
.hero-halo-two { background: radial-gradient(circle, color-mix(in oklch, var(--color-info) 12%, transparent), transparent 70%); }
.hero-copy h1,
.page-hero h1 { font-size: clamp(3rem, 6vw, 5.25rem); line-height: .98; letter-spacing: -.01em; }
.hero-copy h1 em,
.page-hero h1 em { color: var(--color-primary-ink); font-family: var(--font-primary); font-style: normal; font-weight: 600; }
.hero-lead,
.page-lead,
.section-intro > p,
.apps-heading > p,
.desktop-copy > p,
.teams-copy > p { color: var(--text-secondary); }
.eyebrow,
.kicker,
.page-kicker { color: var(--text-muted); font-weight: 600; letter-spacing: .08em; }
.eyebrow span { background: var(--color-primary); }

.product-stage,
.stage-topbar,
.stage-sidebar,
.stage-rail,
.mini-panel,
.focus-card,
.floating-chip,
.feature-block,
.journey-step,
.flow-canvas,
.desktop-window,
.closing-card {
  border-color: var(--line-soft);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.product-stage { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.stage-topbar { border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.stage-sidebar { border-radius: 0 0 0 var(--radius-xl); }
[dir="rtl"] .stage-sidebar { border-radius: 0 0 var(--radius-xl) 0; }
.stage-rail { border-radius: 0 0 var(--radius-xl) 0; }
[dir="rtl"] .stage-rail { border-radius: 0 0 0 var(--radius-xl); }
.mini-panel,
.focus-card,
.journey-step,
.feature-block,
.flow-canvas,
.closing-card { border-radius: var(--radius-lg); }
.home-enterprise .closing-card { border-radius: 0; }
.floating-chip,
.flow-node,
.desktop-badge { border-radius: var(--radius-md); }
.journey-icon .svg-glyph { width: 1.35rem; height: 1.35rem; }
.rail-note-icon .svg-glyph,
.desktop-badge > span .svg-glyph,
.floating-chip > span .svg-glyph { width: 1rem; height: 1rem; }
.stage-heading button .svg-glyph,
.canvas-toolbar button .svg-glyph { width: .875rem; height: .875rem; }
.stage-heading button,
.canvas-toolbar button,
.rail-head button { display: inline-flex; align-items: center; justify-content: center; }
.window-controls { display: inline-flex; align-items: center; gap: .45rem; color: var(--text-muted); }
.window-controls .svg-glyph { width: .65rem; height: .65rem; }
.stage-heading button,
.rail-note button { border-radius: var(--radius-md); color: var(--color-on-primary); background: var(--color-primary); }
.focus-card { background: color-mix(in oklch, var(--color-primary) 10%, var(--color-surface)); }
.focus-copy span { color: var(--color-primary-ink); }
.focus-copy h3 { color: var(--text-primary); }
.focus-copy p { color: var(--text-secondary); }
.focus-progress { background: conic-gradient(var(--color-primary) 72%, var(--color-surface-2) 0); }
.focus-progress span { color: var(--text-primary); background: var(--color-surface); }

.section { padding-block: var(--section-space); border-color: var(--line-soft); }
.section-intro h2,
.apps-heading h2,
.desktop-copy h2,
.teams-copy h2,
.closing-card h2,
.inner-intro h2,
.page-cta-card h2 { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.08; letter-spacing: -.01em; }
.journey-step,
.feature-block,
.app-card { background: var(--color-surface); border-color: var(--line-soft); }
.journey-step:hover,
.app-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.journey-icon,
.app-icon { border-radius: var(--radius-lg); }
.filter-bar,
.billing-toggle { padding: .25rem; border-radius: var(--radius-md); background: var(--color-surface-1); }
.filter-bar button,
.billing-toggle button,
.market-filters button { border-radius: var(--radius-sm); }
.filter-bar button.filter-active,
.billing-toggle button.active,
.market-filters button.active { color: var(--color-on-primary); background: var(--color-primary); }

.desktop-section { color: #fcfcfc; background: var(--palette-neutral-950); }
.desktop-copy h2 { color: #fcfcfc; }
.desktop-copy .kicker { color: color-mix(in oklch, #fcfcfc 76%, transparent); }
.desktop-copy > p,
.desktop-copy li { color: color-mix(in oklch, #fcfcfc 82%, transparent); }
.desktop-copy > small { color: color-mix(in oklch, #fcfcfc 64%, transparent); }
.desktop-section .button-light {
  color: var(--palette-neutral-950);
  border-color: #fcfcfc;
  background: #fcfcfc;
}
.desktop-section .button-light:hover {
  color: var(--palette-neutral-950);
  border-color: #fff;
  background: color-mix(in oklch, #fcfcfc 88%, var(--color-primary));
}
.desktop-badge,
.desktop-badge p,
.desktop-badge b { color: #172029; }
.desktop-badge p small { color: #667178; }
.desktop-copy li::before,
.plan-card li::before {
  content: "";
  width: 1em;
  height: 1em;
  display: inline-block;
  background: currentColor;
  -webkit-mask: url("/assets/check.svg") center / contain no-repeat;
  mask: url("/assets/check.svg") center / contain no-repeat;
}
.plan-card li::before { margin-inline-end: .55rem; color: var(--color-primary-ink); vertical-align: -.12em; }
.desktop-window { background: var(--color-surface); }
.team-app-icon { border-radius: var(--radius-md); }
.team-app-icon img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; }
.flow-canvas { background-color: color-mix(in oklch, var(--color-on-surface) 2%, var(--color-surface)); }
.reference-lines,
.flow-lines {
  pointer-events: none;
  overflow: visible;
}
.reference-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: color-mix(in oklch, var(--color-highlight) 70%, var(--color-on-surface));
  stroke-width: 1.5;
}
.flow-lines {
  inset: 0;
  height: 100%;
}
.reference-lines path,
.flow-lines path {
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 320ms ease;
}
.reference-block.is-visible .reference-lines path,
.flow-canvas.is-visible .flow-lines path,
.connectors-ready .reference-lines path,
.connectors-ready .flow-lines path { opacity: 1; }
.map-node,
.flow-node {
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.map-node:hover,
.flow-node:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-lg);
}
.reference-map .node-three { right: 8%; }
.closing-card { background: color-mix(in oklch, var(--color-primary) 9%, var(--color-surface)); }

/* Site footer (site-chrome.js): brand + calls to action beside five link
   columns, the Nusware maker strip, then the legal line. */
.site-footer {
  width: 100%;
  margin: 0;
  padding: 4.5rem max(var(--page-gutter), calc((100vw - 1280px) / 2)) 1.75rem;
  display: block;
  color: var(--text-primary);
  border-top: 1px solid var(--line-soft);
  background:
    radial-gradient(60rem 22rem at 0% 0%, color-mix(in oklch, var(--color-primary) 9%, transparent), transparent 70%),
    var(--color-surface-1);
}
[dir="rtl"] .site-footer { text-align: start; background-position: 100% 0, 0 0; }
.footer-top { display: grid; grid-template-columns: minmax(14rem, .8fr) 3fr; gap: clamp(2rem, 5vw, 4.5rem); }
.footer-brand p { max-width: 17rem; margin: 1rem 0 0; color: var(--text-secondary); font-size: .875rem; line-height: 1.6; }
.footer-cta { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.footer-cta .button { display: inline-flex; align-items: center; gap: .4rem; }
.footer-cta .svg-glyph { width: 1rem; height: 1rem; }
.footer-links { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; font-size: .8125rem; }
.footer-col b { margin-bottom: .35rem; color: var(--text-primary); font-size: .6875rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
[dir="rtl"] .footer-col b,
[dir="rtl"] .footer-maker-copy small { letter-spacing: 0; font-size: .8125rem; }
.site-footer .footer-col a { color: var(--text-secondary); transition: color 150ms ease; }
.site-footer .footer-col a:hover,
.site-footer .footer-col a:focus-visible { color: var(--text-primary); }
.footer-app { display: inline-flex; align-items: center; gap: .5rem; }
.footer-app img { width: 1.125rem; height: 1.125rem; border-radius: .3rem; }
.site-footer .footer-col .footer-more { color: var(--color-primary-ink); font-weight: 650; }
.footer-out { width: .8em; height: .8em; margin-inline-start: .3rem; vertical-align: -.05em; opacity: .7; }
[dir="rtl"] .footer-out { transform: scaleX(-1); }
.footer-more { display: inline-flex; align-items: center; gap: .35rem; }
.footer-more-icon { width: .95em; height: .95em; }
.footer-maker {
  margin-top: 3.5rem;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.footer-maker:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm, 0 4px 18px rgba(16, 24, 32, .06)); }
.footer-maker img { width: 3.25rem; height: auto; flex: none; }
.footer-maker-copy { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.footer-maker-copy small { color: var(--text-muted); font-size: .625rem; font-weight: 750; letter-spacing: .1em; }
.footer-maker-copy span { color: var(--text-primary); font-size: .875rem; }
.footer-maker-go { width: 1.125rem; height: 1.125rem; margin-inline-start: auto; display: block; flex: none; align-self: center; color: var(--color-primary-ink); stroke-width: 2; }
[dir="rtl"] .footer-maker-go { transform: scaleX(-1); }
.footer-bottom { margin-top: 1.5rem; padding-top: 1.25rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; border-top: 1px solid var(--line-soft); color: var(--text-muted); font-size: .75rem; }
.footer-bottom-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.site-footer .footer-bottom a { color: var(--text-muted); }
.site-footer .footer-bottom a:hover { color: var(--text-primary); }
@media (max-width: 1100px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-brand { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 2rem; }
  .footer-brand .brand { grid-column: 1 / -1; }
  .footer-cta { margin-top: 0; }
}
@media (max-width: 820px) {
  .footer-links { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2.25rem; }
  .footer-brand { display: block; }
  .footer-cta { margin-top: 1.25rem; }
}

/* Inner pages use the same product language. */
.page-hero { min-height: 500px; padding-block: var(--space-8); border-color: var(--line-soft); background: linear-gradient(135deg, color-mix(in oklch, var(--color-primary) 8%, var(--color-surface)), var(--color-surface) 62%); }
.page-hero::before { background: radial-gradient(circle, color-mix(in oklch, var(--color-primary) 15%, transparent), transparent 68%); }
.page-hero::after { border-color: var(--line-soft); }
.visual-mark { width: 176px; height: 176px; border-radius: var(--radius-xl); border-color: var(--line-soft); background: var(--color-surface); box-shadow: var(--shadow-lg); transform: none; }
.visual-card { border-radius: var(--radius-md); border-color: var(--line-soft); background: var(--color-surface); box-shadow: var(--shadow-md); }
.inner-section { padding-block: var(--section-space); border-color: var(--line-soft); }
.content-card,
.showcase-app,
.plan-card,
.limits-wrap,
.docs-nav,
.doc-link-card,
.auth-card,
.account-rail,
.account-panel,
.download-card,
.step-card,
.market-card,
.page-cta-card { border-color: var(--line-soft); background: var(--color-surface); box-shadow: none; }
.content-card,
.showcase-app,
.plan-card,
.account-panel,
.download-card,
.market-card { border-radius: var(--radius-lg); }
.content-grid,
.plans-grid,
.app-showcase,
.download-grid,
.market-grid { gap: var(--space-4); }
.content-card,
.showcase-app,
.plan-card,
.account-panel,
.download-card,
.market-card { padding: clamp(1.25rem, 2.25vw, 1.75rem); }
.content-card { min-height: 220px; }
.limits-wrap,
.docs-nav,
.doc-link-card,
.auth-card,
.account-rail,
.step-card { border-radius: var(--radius-md); }
.page-cta-card { border-radius: var(--radius-xl); background: color-mix(in oklch, var(--color-primary) 12%, var(--color-surface)); }
.content-card.tint-acid { background: color-mix(in oklch, var(--color-success) 14%, var(--color-surface)); }
.content-card.tint-blue { background: color-mix(in oklch, var(--color-info) 14%, var(--color-surface)); }
.content-card.tint-coral { background: color-mix(in oklch, var(--color-highlight) 15%, var(--color-surface)); }
.content-card.tint-violet { background: color-mix(in oklch, var(--palette-violet-300) 14%, var(--color-surface)); }
.content-card p,
.showcase-app p,
.plan-card > p,
.docs-content p,
.docs-content li,
.download-card p,
.step-card p,
.market-card p,
.legal-content p,
.legal-content li { color: var(--text-secondary); }
.content-card h3,
.showcase-app h3,
.plan-card h3,
.docs-content h2,
.auth-card h1,
.legal-content h2 { letter-spacing: -.01em; }
.plan-card.featured { color: var(--text-primary); border-color: color-mix(in oklch, var(--color-primary) 45%, var(--line-soft)); background: color-mix(in oklch, var(--color-primary) 10%, var(--color-surface)); }
.plan-card.business { color: var(--text-primary); background: var(--color-surface); }
.plan-badge,
.featured .plan-badge,
.business .plan-badge { color: var(--color-primary-ink); border: 1px solid color-mix(in oklch, var(--color-primary) 30%, transparent); background: color-mix(in oklch, var(--color-primary) 14%, transparent); }
.plan-card li,
.limits-table th,
.limits-table td,
.docs-nav a { border-color: var(--line-soft); }
.limits-table th { color: var(--text-secondary); background: var(--color-surface-1); }
.docs-nav { max-height: calc(100vh - 3rem); overflow: auto; background: var(--color-surface-1); }
.doc-callout { color: var(--text-secondary); border-inline-start-color: var(--color-primary); border-radius: 0 var(--radius-md) var(--radius-md) 0; background: color-mix(in oklch, var(--color-primary) 8%, var(--color-surface)); }
[dir="rtl"] .doc-callout { border-radius: var(--radius-md) 0 0 var(--radius-md); }

.auth-shell { min-height: calc(100vh - 65px); background: radial-gradient(42rem 34rem at 0 0, color-mix(in oklch, var(--color-primary) 10%, transparent), transparent 60%); }
.auth-card { max-width: 34rem; border: 0; background: transparent; }
.auth-card.wide { max-width: 56rem; }
.field { gap: .375rem; }
.field label { color: var(--text-muted); font-size: .875rem; font-weight: 400; }
.field input,
.field select,
.field textarea {
  min-height: 42px;
  border-color: var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  background: color-mix(in oklch, var(--color-on-surface) 4%, transparent);
  font-size: .875rem;
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--color-primary); outline: none; box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-primary) 18%, transparent); }
.demo-notice { border-radius: var(--radius-md); color: var(--color-primary-ink); background: color-mix(in oklch, var(--color-success) 16%, var(--color-surface)); }
.account-rail { background: var(--color-surface-1); }
.account-rail button { border-radius: var(--radius-sm); color: var(--text-secondary); }
.account-rail button.active { color: var(--color-on-primary); background: var(--color-primary); }
.usage-bar { background: var(--color-surface-2); }
.usage-bar i { background: var(--color-primary); }
.os-symbol { border-radius: var(--radius-md); background: var(--color-surface-2); }
.os-symbol .svg-glyph { width: 1.5rem; height: 1.5rem; }
.inline-arrow-link { display: inline-flex; align-items: center; gap: .4rem; }
.inline-arrow-link .svg-glyph { width: .95rem; height: .95rem; }
.limit-check { width: 1rem; height: 1rem; color: var(--color-primary-ink); }
.demo-icon img { width: 100%; height: 100%; display: block; border-radius: inherit; object-fit: cover; }
[dir="rtl"] .flow-cursor span { transform: scaleX(-1) rotate(-20deg); }
.market-preview { border-radius: var(--radius-md); background: var(--color-surface-1); }
.market-preview::before,
.market-preview::after { border-radius: var(--radius-sm); background: var(--color-surface-3); }
.legal-meta span { border-radius: var(--radius-full); color: var(--text-muted); background: var(--color-surface-1); }

/* Feature-complete landing surfaces. */
.home-pricing,
.home-faq { width: var(--page); margin-inline: auto; padding-block: var(--section-space); }
.home-plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.home-plan { min-height: 280px; padding: var(--space-5); display: flex; flex-direction: column; align-items: flex-start; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--color-surface); }
.home-plan.is-primary { border-color: color-mix(in oklch, var(--color-primary) 45%, var(--line-soft)); background: color-mix(in oklch, var(--color-primary) 10%, var(--color-surface)); }
.home-plan > span { color: var(--text-muted); font-size: .75rem; }
.home-plan h3 { margin: var(--space-5) 0 var(--space-2); font-size: 1.5rem; letter-spacing: -.01em; }
.home-plan > strong { font-size: 2rem; font-weight: 600; }
.home-plan > p { flex: 1; color: var(--text-secondary); }
.faq-list { max-width: 920px; border-top: 1px solid var(--line-soft); }
.faq-list details { border-bottom: 1px solid var(--line-soft); }
.faq-list summary { padding: 1.15rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; font-size: 1.125rem; font-weight: 500; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { width: 28px; height: 28px; display: grid; place-items: center; flex: none; border: 1px solid var(--line-soft); border-radius: var(--radius-md); color: var(--color-primary-ink); transition: transform 120ms ease; }
.faq-list summary span .svg-glyph { width: .9rem; height: .9rem; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { max-width: 740px; margin: -.25rem 0 1.25rem; color: var(--text-secondary); line-height: 1.7; }

.builder-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr); gap: clamp(2rem, 7vw, 6rem); align-items: start; }
.builder-layout .inner-intro { margin-bottom: 0; }
.estimate-card { padding: var(--space-6); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--color-surface-1); }
.estimate-field { margin-bottom: var(--space-5); }
.estimate-field label { margin-bottom: var(--space-3); display: flex; justify-content: space-between; color: var(--text-secondary); font-size: .875rem; }
.estimate-field label strong { color: var(--text-primary); }
.estimate-field input[type="range"] { width: 100%; accent-color: var(--color-primary); }
.segmented { display: inline-flex; padding: .25rem; border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: var(--color-surface); }
.segmented button { padding: .5rem .75rem; border: 0; border-radius: var(--radius-sm); color: var(--text-secondary); background: transparent; cursor: pointer; }
.segmented button.active { color: var(--color-on-primary); background: var(--color-primary); }
.estimate-total { margin-block: var(--space-6); padding-block: var(--space-5); display: grid; grid-template-columns: 1fr auto; align-items: end; border-block: 1px solid var(--line-soft); }
.estimate-total > span { color: var(--text-secondary); }
.estimate-total > strong { font-size: 2.5rem; line-height: 1; font-weight: 600; }
.estimate-total small { grid-column: 1 / -1; margin-top: .5rem; color: var(--text-muted); }
.bz-card { min-height: 420px; }
.bz-card h3 { margin: 0 0 .25rem; font-size: 1.25rem; font-weight: 600; }
.bz-card .form-grid { margin-top: var(--space-5); }
.bz-card .form-actions { margin-top: var(--space-5); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.check-row a { color: var(--color-primary-ink); text-decoration: underline; text-underline-offset: 2px; }
.bz-hint { margin: .25rem 0 0; color: var(--text-muted); font-size: .8125rem; line-height: 1.55; }
.bz-summary { margin-top: var(--space-6); padding: var(--space-4) var(--space-5); display: grid; gap: var(--space-3); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--color-surface); }
.bz-summary[hidden] { display: none; }
.bz-summary > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.bz-summary > div + div { padding-top: var(--space-3); border-top: 1px solid var(--line-soft); }
.bz-summary span { color: var(--text-secondary); }
.bz-summary small { color: var(--text-muted); font-size: .8125rem; }
.bz-summary strong { margin-inline-start: auto; font-size: 1.5rem; font-weight: 600; }
.bz-progress { margin: 0 0 var(--space-5); padding: 0; display: flex; gap: .375rem; list-style: none; counter-reset: none; }
.bz-progress li { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: .375rem; color: var(--text-muted); font-size: .75rem; }
.bz-progress li::before { content: ""; height: 3px; border-radius: var(--radius-full); background: var(--line-soft); }
.bz-progress li.is-done::before, .bz-progress li.is-current::before { background: var(--color-primary); }
.bz-progress li > span { display: none; }
.bz-progress li b { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.bz-progress li.is-current b { color: var(--text-primary); }
.bz-seat-details { margin-top: var(--space-5); border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: var(--color-surface); }
.bz-seat-details > summary { padding: .75rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); cursor: pointer; list-style: none; font-size: .875rem; }
.bz-seat-details > summary::-webkit-details-marker { display: none; }
.bz-seat-details > summary::after { content: ""; width: .45rem; height: .45rem; flex: none; border-inline-end: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted); transform: rotate(45deg); transition: transform 160ms ease; }
.bz-seat-details.is-open > summary::after { transform: rotate(-135deg); }
.bz-seat-details > summary small { margin-inline-start: auto; color: var(--text-muted); font-size: .75rem; }
.bz-seat-details .bz-hint { padding: 0 1rem; }
.bz-seat-details .bz-seat-list + .button { margin: .75rem 1rem 1rem; }
.bz-seat-list { max-height: 300px; margin: .5rem 0 0; padding: 0 1rem; overflow-y: auto; list-style: none; }
.bz-seat { padding: .625rem 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto 28px; align-items: center; gap: .75rem; border-top: 1px solid var(--line-soft); font-size: .8125rem; }
.bz-seat-label { font-weight: 500; }
.bz-seat-plan { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }
.bz-seat-plan small { color: var(--text-muted); font-size: .6875rem; }
.bz-payg { display: inline-flex; align-items: center; gap: .375rem; color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.bz-seat-remove { width: 28px; height: 28px; padding: 0; display: grid; place-items: center; border: 1px solid transparent; border-radius: var(--radius-md); color: var(--text-muted); background: transparent; cursor: pointer; }
.bz-seat-remove:hover { color: var(--color-danger); border-color: var(--line-soft); }
.bz-seat-remove .svg-glyph { width: .75rem; height: .75rem; }
.bz-code { font-size: 1.25rem !important; letter-spacing: .4em; text-align: center; }
.bz-center { min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; text-align: center; }
.bz-center > .svg-glyph { width: 2.75rem; height: 2.75rem; margin-bottom: .5rem; padding: .7rem; border-radius: var(--radius-lg); color: var(--color-primary-ink); background: color-mix(in oklch, var(--color-primary) 14%, var(--color-surface)); }
.bz-center .bz-hint { max-width: 26rem; }
.bz-center .estimate-total { width: 100%; text-align: start; }
.bz-center .form-actions { justify-content: center; }
.bz-team-name { margin: 0; color: var(--text-secondary); font-weight: 500; }
.bz-payment .checkout-summary { margin-top: var(--space-4); }
.bz-payment form { margin-top: var(--space-5); }

.reading-progress { position: fixed; inset: 0 0 auto; z-index: 100; height: 2px; pointer-events: none; }
.reading-progress i { width: 0; height: 100%; display: block; background: var(--color-primary); }
.docs-search { margin-bottom: var(--space-4); display: block; }
.docs-search span { margin-bottom: .375rem; display: block; color: var(--text-muted); font-size: .75rem; }
.docs-search input,
.market-search input { width: 100%; min-height: 38px; padding: .5rem .625rem; border: 1px solid var(--line-soft); border-radius: var(--radius-md); color: var(--text-primary); background: var(--color-surface); font: inherit; font-size: .875rem; outline: 0; }
.docs-search input:focus,
.market-search input:focus { border-color: var(--color-primary); }
.docs-nav a { position: relative; transition: color .2s ease, background .2s ease, padding .2s ease; }
.docs-nav a.active { margin-inline: -10px; padding-inline: 10px; border-color: transparent; border-radius: var(--radius-md); color: var(--color-primary-ink); background: color-mix(in oklch, var(--color-primary) 14%, var(--color-surface)); font-weight: 600; }
.docs-nav a.active::before { content: ""; position: absolute; inset-block: 7px; inset-inline-start: 0; width: 3px; border-radius: 3px; background: var(--color-primary); }
.market-search { flex: 1 1 260px; }
.market-card { cursor: pointer; transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease; }
.market-card:hover,
.market-card:focus-visible { border-color: var(--color-primary); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.market-dialog { position: fixed; inset: 0; z-index: 120; padding: 1rem; display: grid; place-items: center; background: color-mix(in oklch, var(--palette-neutral-950) 50%, transparent); backdrop-filter: blur(8px); }
.market-dialog > div { position: relative; width: min(540px, 100%); max-height: min(760px, calc(100vh - 2rem)); overflow: auto; padding: var(--space-6); border: 1px solid var(--line-soft); border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-lg); }
.dialog-close { position: absolute; inset-block-start: .75rem; inset-inline-end: .75rem; width: 34px; height: 34px; border: 1px solid var(--line-soft); border-radius: var(--radius-md); color: var(--text-secondary); background: var(--color-surface); cursor: pointer; }
.market-dialog-preview { height: 180px; margin: -2rem -2rem 2rem; border-radius: var(--radius-xl) var(--radius-xl) 0 0; background: linear-gradient(135deg, color-mix(in oklch, var(--color-primary) 18%, var(--color-surface)), var(--color-surface-1)); }
.market-dialog h2 { margin-block: 0 .5rem; font-size: 2rem; letter-spacing: -.01em; }
.market-dialog p,
.market-dialog li { color: var(--text-secondary); }
.dialog-status { min-height: 1.5rem; }

.account-list { margin-block: var(--space-5); border-top: 1px solid var(--line-soft); }
.account-list span { padding-block: .875rem; display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line-soft); color: var(--text-secondary); }
.account-list b { color: var(--text-primary); font-weight: 500; }
.account-usage { margin-top: var(--space-5); }
.checkout-summary { padding: var(--space-4); display: flex; justify-content: space-between; gap: var(--space-5); border: 1px solid color-mix(in oklch, var(--color-primary) 35%, var(--line-soft)); border-radius: var(--radius-md); background: color-mix(in oklch, var(--color-primary) 8%, var(--color-surface)); }
.checkout-summary div { display: flex; flex-direction: column; }
.checkout-summary span { color: var(--text-muted); font-size: .75rem; }
.checkout-summary strong { font-size: 1.125rem; }
.password-wrap { position: relative; }
.password-wrap input { padding-inline-end: 4rem; }
.password-wrap button { position: absolute; inset-inline-end: .375rem; top: 50%; transform: translateY(-50%); padding: .25rem .45rem; border: 0; border-radius: var(--radius-sm); color: var(--color-primary-ink); background: transparent; cursor: pointer; font-size: .75rem; }
.password-strength { display: grid; grid-template-columns: 80px 1fr; align-items: center; gap: .5rem; color: var(--text-muted); font-size: .75rem; }
.password-strength i { height: 4px; display: block; border-radius: var(--radius-full); background: var(--color-surface-2); overflow: hidden; }
.password-strength i::before { content: ""; width: 20%; height: 100%; display: block; background: var(--color-danger); transition: width 120ms ease, background 120ms ease; }
.password-strength[data-score="2"] i::before { width: 50%; background: var(--color-warning); }
.password-strength[data-score="3"] i::before { width: 75%; background: var(--color-highlight); }
.password-strength[data-score="4"] i::before { width: 100%; background: var(--color-success); }
.drop-zone { margin-block: var(--space-5); padding: var(--space-7); display: grid; place-items: center; gap: .25rem; border: 1px dashed color-mix(in oklch, var(--color-primary) 50%, var(--line-soft)); border-radius: var(--radius-lg); text-align: center; background: color-mix(in oklch, var(--color-primary) 5%, var(--color-surface)); cursor: pointer; }
.drop-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop-zone span { color: var(--text-muted); font-size: .75rem; }

/* Brand page: logo library, Effra specimen, color roles and palette. */
.brand-download svg { width: 15px; height: 15px; flex: none; }
.brand-downloads { margin-top: auto; padding-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.brand-logo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.brand-logo-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--color-surface); }
.brand-logo-preview { aspect-ratio: 4 / 3; display: grid; place-items: center; border-bottom: 1px solid var(--line-soft); }
.brand-logo-preview img { width: 42%; max-height: 52%; object-fit: contain; }
.brand-logo-preview.tone-paper { background: var(--palette-neutral-50); }
.brand-logo-preview.tone-wash { background: #e4eeee; }
.brand-logo-preview.tone-ink { background: var(--palette-neutral-950); }
.brand-logo-body { flex: 1; padding: var(--space-5); display: flex; flex-direction: column; }
.brand-logo-body h3 { margin: 0; font-size: 1.125rem; }
.brand-logo-body p { margin: .5rem 0 0; color: var(--text-secondary); font-size: .8125rem; line-height: 1.6; }

.brand-type-card { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--color-surface); }
.brand-type-specimen { padding: var(--space-7) var(--space-6); background: var(--color-surface-1); border-inline-end: 1px solid var(--line-soft); }
.brand-type-glyphs { display: block; font-size: clamp(4rem, 9vw, 7.5rem); font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.brand-type-weights { margin-top: var(--space-6); display: grid; }
.brand-type-weights p { margin: 0; padding: .75rem 0; display: grid; grid-template-columns: 3rem 6rem minmax(0, 1fr); gap: var(--space-3); align-items: baseline; border-top: 1px solid var(--line-soft); line-height: 1.2; }
.brand-type-weights small { color: var(--text-muted); font-size: .75rem; }
.brand-weight-sample { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-weight-name { color: var(--text-secondary); font-size: .8125rem; }
.brand-type-meta { padding: var(--space-6); display: flex; flex-direction: column; }
.brand-type-meta > small { color: var(--text-muted); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.brand-type-meta h3 { margin: .25rem 0 0; font-size: 2.5rem; letter-spacing: -.03em; }
.brand-type-meta p { margin: .5rem 0 0; color: var(--text-secondary); line-height: 1.6; }
.brand-type-meta dl { margin: var(--space-5) 0 var(--space-5); display: grid; }
.brand-type-meta dl div { padding: .625rem 0; display: flex; justify-content: space-between; gap: var(--space-3); border-top: 1px solid var(--line-soft); font-size: .8125rem; }
.brand-type-meta dt { color: var(--text-muted); }
.brand-type-meta dd { margin: 0; font-weight: 500; }
.brand-type-meta .brand-download { margin-top: auto; align-self: flex-start; }

.brand-job-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.brand-job-card { padding: var(--space-5); display: flex; flex-direction: column; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--color-surface); }
.brand-job-swatch { height: 120px; margin-bottom: var(--space-5); display: flex; overflow: hidden; border: 1px solid var(--line-soft); border-radius: var(--radius-md); }
.brand-job-swatch i { flex: 1; background: var(--c); }
.brand-job-card .card-index { margin-bottom: var(--space-2); }
.brand-job-card h3 { margin: 0; font-size: 1.375rem; letter-spacing: -.02em; }
.brand-job-card > p { margin: .5rem 0 0; color: var(--text-secondary); font-size: .8125rem; line-height: 1.6; }
.brand-chip-list { margin-top: var(--space-5); display: grid; gap: var(--space-2); }
.brand-chip { position: relative; width: 100%; padding: .5rem; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: .75rem; align-items: center; border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; transition: border-color 120ms ease, background 120ms ease; }
.brand-chip:hover { border-color: var(--line-strong); background: var(--color-surface-1); }
.brand-chip i { width: 34px; height: 34px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--c); }
.brand-chip span { display: grid; min-width: 0; }
.brand-chip b { font-size: .8125rem; font-weight: 600; }
.brand-chip small { color: var(--text-muted); font-size: .6875rem; }
.brand-chip code { color: var(--text-muted); font-size: .6875rem; }
.brand-chip[data-copied] code { visibility: hidden; }
.brand-chip[data-copied]::after { content: attr(data-copied); position: absolute; inset-inline-end: .75rem; bottom: 50%; transform: translateY(50%); color: var(--color-primary-ink); font-size: .6875rem; font-weight: 600; }


.brand-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.brand-rule { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--color-surface); }
.brand-rule-demo { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--line-soft); background: var(--color-surface-1); }
.brand-rule-demo img { width: 64px; height: auto; display: block; }
.brand-rule-body { padding: var(--space-5); }
.brand-rule-verdict { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .625rem .25rem .5rem; border-radius: var(--radius-full); font-size: .75rem; font-weight: 600; }
.brand-rule-verdict svg { width: 14px; height: 14px; }
.brand-rule.is-do .brand-rule-verdict { color: #3f5a12; background: color-mix(in oklch, var(--color-success) 45%, var(--color-surface)); }
.brand-rule.is-dont .brand-rule-verdict { color: #9b1c1c; background: color-mix(in oklch, var(--color-danger) 18%, var(--color-surface)); }
.brand-rule h3 { margin: var(--space-3) 0 0; font-size: 1.125rem; letter-spacing: -.01em; }
.brand-rule p { margin: .375rem 0 0; color: var(--text-secondary); font-size: .8125rem; line-height: 1.6; }
.rule-space { position: relative; }
.rule-space-box { padding: 16px; display: block; outline: 1px dashed color-mix(in oklch, var(--color-primary) 70%, transparent); outline-offset: 0; background: repeating-linear-gradient(45deg, color-mix(in oklch, var(--color-primary) 10%, transparent) 0 4px, transparent 4px 8px); }
.rule-space-box img { background: var(--color-surface-1); box-shadow: 0 0 0 1px color-mix(in oklch, var(--color-primary) 35%, transparent); }
.rule-space-gap { position: absolute; top: 50%; inset-inline-end: -26px; transform: translateY(-50%); color: var(--color-primary-ink); font-size: .75rem; font-style: normal; font-weight: 600; }
.rule-pair { width: 100%; height: 100%; display: grid; grid-template-columns: 1fr 1fr; }
.rule-pair span { display: grid; place-items: center; }
.rule-pair .tone-paper { background: var(--palette-neutral-50); }
.rule-pair .tone-ink { background: var(--palette-neutral-950); }
.rule-ratio { width: 62%; height: 44px; display: flex; gap: 4px; }
.rule-ratio i { flex: 1; border-radius: var(--radius-sm); background: var(--c); }
.rule-distort img { width: 64px; transform: scale(1.9, .7) rotate(-8deg); }
.rule-restyle img { filter: hue-rotate(150deg) saturate(3) drop-shadow(3px 4px 0 #ff5a5a); }
.rule-busy { width: 100%; height: 100%; display: grid; place-items: center; background: repeating-linear-gradient(60deg, #fccce2 0 14px, #83dfe9 14px 28px, #c6e772 28px 42px, #ffb676 42px 56px, #a495c6 56px 70px); }
@media (max-width: 1100px) {
  .brand-logo-grid,
  .brand-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-job-grid,
  .brand-type-card { grid-template-columns: 1fr; }
  .brand-type-specimen { border-inline-end: 0; border-bottom: 1px solid var(--line-soft); }
}
.detected-platform { margin-bottom: var(--space-5); padding: var(--space-4); display: flex; align-items: center; gap: var(--space-3); border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: var(--color-surface-1); }
.detected-platform span,
.detected-platform small { color: var(--text-muted); }
.detected-platform small { margin-inline-start: auto; }

/* Shared Nusuq control language: the landing uses the same motion, geometry and
   interaction states as the product's Collapse, Button, Segmented and fields. */
.ui-collapse {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 260ms cubic-bezier(.2, .8, .2, 1),
    opacity 180ms ease;
}
.ui-collapse[data-open] { grid-template-rows: 1fr; opacity: 1; }
.ui-collapse > .ui-collapse-inner { min-width: 0; min-height: 0; overflow: hidden; }
.ui-collapse[data-settled] > .ui-collapse-inner { overflow: visible; }

.button {
  border-radius: var(--radius-md);
  transition:
    border-color 120ms ease,
    background 120ms ease,
    color 120ms ease,
    filter 120ms ease,
    transform 120ms ease;
}
.button:hover { transform: none; }
.button:active { transform: translateY(1px); }
/* Everything clickable shows the hand; disabled and "current" states opt out below. */
button,
.button,
[role="button"],
summary,
select,
input[type="checkbox"],
input[type="radio"],
input[type="range"],
input[type="file"],
input[type="submit"],
input[type="button"],
label:has(> input[type="checkbox"], > input[type="radio"], > input[type="file"]) { cursor: pointer; }
.button[aria-disabled="true"] { cursor: default; }
.button:disabled,
button:disabled { cursor: not-allowed; opacity: .55; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible,
.button:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--color-primary) 60%, transparent);
  outline-offset: 2px;
}

.menu-button .menu-button-glyph { position: relative; width: 1.125rem; height: 1.125rem; margin: 0; display: grid; place-items: center; background: transparent; }
.menu-button-glyph .svg-glyph { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 120ms ease, transform 180ms cubic-bezier(.2,.8,.2,1); }
.menu-close-glyph { opacity: 0; transform: scale(.72) rotate(-45deg); }
.menu-button[aria-expanded="true"] .menu-open-glyph { opacity: 0; transform: scale(.72) rotate(45deg); }
.menu-button[aria-expanded="true"] .menu-close-glyph { opacity: 1; transform: none; }

.faq-list details { overflow: clip; }
.faq-list summary { user-select: none; }
.faq-list summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-sm); }
.faq-list .ui-collapse-inner > p { max-width: 740px; margin: -.25rem 0 1.25rem; color: var(--text-secondary); line-height: 1.7; }
.faq-toggle-glyph {
  position: relative;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: none;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  color: var(--color-primary-ink);
  transform: none !important;
  transition: border-color 120ms ease, background 120ms ease !important;
}
.faq-toggle-glyph .svg-glyph {
  position: absolute;
  width: .9rem;
  height: .9rem;
  transition: opacity 120ms ease, transform 180ms cubic-bezier(.2,.8,.2,1);
}
.faq-toggle-glyph .faq-minus { opacity: 0; transform: scale(.65); }
.faq-list details.is-open .faq-toggle-glyph { border-color: var(--color-primary); background: color-mix(in oklch, var(--color-primary) 10%, transparent); }
.faq-list details.is-open .faq-plus { opacity: 0; transform: scale(.65); }
.faq-list details.is-open .faq-minus { opacity: 1; transform: scale(1); }

.billing-toggle,
.segmented,
.filter-bar {
  display: inline-flex;
  padding: .1875rem;
  gap: .1875rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: transparent;
}
.billing-toggle button,
.segmented button,
.filter-bar button,
.market-filters button,
.account-rail button {
  min-height: 34px;
  padding: .3125rem .625rem;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  background: transparent;
  font: inherit;
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
}
.billing-toggle button:hover,
.segmented button:hover,
.filter-bar button:hover,
.market-filters button:hover,
.account-rail button:hover {
  color: var(--text-primary);
  background: color-mix(in oklch, var(--color-primary) 10%, transparent);
}
.billing-toggle button.active,
.segmented button.active,
.filter-bar button.filter-active,
.market-filters button.active,
.account-rail button.active {
  color: var(--text-primary);
  background: color-mix(in oklch, var(--color-primary) 15%, transparent);
}

.field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
.field textarea,
.docs-search input,
.market-search input,
.nq-select-button {
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  padding: .5rem .625rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  background: color-mix(in oklch, var(--color-on-surface) 4%, transparent);
  font: inherit;
  font-size: .875rem;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder,
.docs-search input::placeholder,
.market-search input::placeholder { color: var(--text-muted); opacity: 1; }
.field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):hover,
.field textarea:hover,
.docs-search input:hover,
.market-search input:hover,
.nq-select-button:hover { border-color: color-mix(in oklch, var(--color-on-surface) 32%, transparent); }
.field input:focus,
.field textarea:focus,
.docs-search input:focus,
.market-search input:focus,
.nq-select-button:focus-visible,
.nq-select.is-open .nq-select-button {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: none;
}
.field input:disabled,
.field textarea:disabled { cursor: not-allowed; opacity: .55; }

.nq-select { position: relative; width: 100%; }
.nq-native-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.nq-select-button { display: flex; align-items: center; justify-content: space-between; gap: .5rem; cursor: pointer; text-align: start; }
.nq-select-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nq-select-chevron { width: 1rem; height: 1rem; color: var(--text-muted); transition: transform 180ms cubic-bezier(.2,.8,.2,1); }
.nq-select.is-open .nq-select-chevron { transform: rotate(180deg); }
.nq-select-menu {
  position: absolute;
  z-index: 40;
  inset-block-start: calc(100% + 4px);
  inset-inline: 0;
  max-height: 240px;
  overflow: auto;
  padding: .5rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px) scale(.985);
  transform-origin: top center;
  transition:
    opacity 180ms ease,
    transform 180ms cubic-bezier(.2,.8,.2,1),
    visibility 0s linear 180ms;
}
.nq-select.is-open .nq-select-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nq-select-option {
  width: 100%;
  min-height: 36px;
  padding: .45rem .5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  background: transparent;
  font: inherit;
  font-size: .875rem;
  text-align: start;
}
.nq-select-option:hover,
.nq-select-option:focus-visible { color: var(--text-primary); background: color-mix(in oklch, var(--color-primary) 10%, transparent); outline: none; }
.nq-select-option.is-selected { color: var(--text-primary); background: color-mix(in oklch, var(--color-primary) 15%, transparent); }
.nq-select-check { width: .9rem; height: .9rem; color: var(--color-primary-ink); opacity: 0; }
.nq-select-option.is-selected .nq-select-check { opacity: 1; }

.nq-check-input,
.nq-radio-input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: .05rem 0 0;
  border: 2px solid color-mix(in oklch, var(--color-on-surface) 28%, transparent);
  border-radius: var(--radius-sm);
  background: transparent center / 75% no-repeat;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.nq-radio-input { border-radius: 50%; }
.nq-check-input:hover,
.nq-radio-input:hover { border-color: var(--color-primary); }
.nq-check-input:checked {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E");
}
.nq-radio-input:checked {
  border-color: var(--color-primary);
  background: radial-gradient(circle, var(--color-primary) 0 40%, transparent 45%);
}
.nq-check-input:focus-visible,
.nq-radio-input:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

input.ui-range {
  --ui-range-fill: var(--color-primary);
  --ui-range-track: var(--color-surface);
  --ui-range-track-size: 6px;
  --ui-range-thumb-size: 15px;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-width: 0;
  height: 1rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
input.ui-range::-webkit-slider-runnable-track {
  height: var(--ui-range-track-size);
  border-radius: var(--radius-full);
  background: linear-gradient(to right, var(--ui-range-fill) 0 var(--ui-range-value, 0%), var(--ui-range-track) var(--ui-range-value, 0%) 100%);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
[dir="rtl"] input.ui-range::-webkit-slider-runnable-track {
  background: linear-gradient(to left, var(--ui-range-fill) 0 var(--ui-range-value, 0%), var(--ui-range-track) var(--ui-range-value, 0%) 100%);
}
input.ui-range::-moz-range-track { height: var(--ui-range-track-size); border-radius: var(--radius-full); background: var(--ui-range-track); box-shadow: inset 0 0 0 1px var(--line-strong); }
input.ui-range::-moz-range-progress { height: var(--ui-range-track-size); border-radius: var(--radius-full); background: var(--ui-range-fill); }
input.ui-range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: var(--ui-range-thumb-size);
  height: var(--ui-range-thumb-size);
  margin-top: calc((var(--ui-range-track-size) - var(--ui-range-thumb-size)) / 2);
  border: 0;
  border-radius: 50%;
  background: var(--ui-range-fill);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--color-on-surface) 18%, transparent);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
input.ui-range::-moz-range-thumb {
  width: var(--ui-range-thumb-size);
  height: var(--ui-range-thumb-size);
  border: 0;
  border-radius: 50%;
  background: var(--ui-range-fill);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--color-on-surface) 18%, transparent);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
input.ui-range:hover::-webkit-slider-thumb,
input.ui-range:active::-webkit-slider-thumb,
input.ui-range:hover::-moz-range-thumb,
input.ui-range:active::-moz-range-thumb { transform: scale(1.12); }
input.ui-range:focus-visible { outline: none; }
input.ui-range:focus-visible::-webkit-slider-thumb,
input.ui-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px color-mix(in oklch, var(--color-primary) 28%, transparent); }

.password-wrap .password-toggle {
  position: absolute;
  inset-inline-end: .375rem;
  top: 50%;
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  background: transparent;
  transform: translateY(-50%);
}
.password-wrap .password-toggle:hover { color: var(--text-primary); background: color-mix(in oklch, var(--color-on-surface) 8%, transparent); }
.password-toggle .svg-glyph { width: 1rem; height: 1rem; }

.demo-notice {
  display: grid !important;
  grid-template-rows: 0fr;
  margin-top: 0;
  padding-block: 0;
  border: 0 solid transparent;
  opacity: 0;
  transition:
    grid-template-rows 260ms cubic-bezier(.2,.8,.2,1),
    opacity 180ms ease,
    margin 260ms cubic-bezier(.2,.8,.2,1),
    padding 260ms cubic-bezier(.2,.8,.2,1);
}
.demo-notice.show { grid-template-rows: 1fr; margin-top: 14px; padding-block: 12px; opacity: 1; }
.demo-notice > .ui-collapse-inner { min-height: 0; overflow: hidden; }

/* Live account, authentication, billing and team workflows. */
.workflow-loading { min-height: 120px; display: grid; place-items: center; color: var(--text-muted); font-size: 13px; }
.workflow-status { display: none; margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-md); color: var(--color-primary-ink); background: color-mix(in oklch, var(--color-primary) 12%, var(--color-surface)); font-size: 12px; line-height: 1.55; }
.workflow-status.show { display: block; }
.workflow-status.is-error { color: #8d3434; background: color-mix(in srgb, var(--color-danger) 12%, var(--color-surface)); }
.workflow-status.is-success { color: #375821; background: color-mix(in oklch, var(--color-success) 18%, var(--color-surface)); }
.workflow-step h2 { margin: 8px 0; font-size: 30px; }
.inline-action { padding: 6px 0; border: 0; color: var(--color-primary-ink); background: transparent; font: inherit; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.forgot-link { align-self: flex-end; padding-bottom: 0; }
.reset-links { margin-top: 10px; display: flex; justify-content: space-between; gap: 12px; }
.compound-input { display: grid; grid-template-columns: minmax(8.5rem, .5fr) minmax(0, 1fr); gap: 8px; }
.compound-input input { min-width: 0; }
.profile-photo-row { margin-bottom: 22px; display: flex; align-items: center; gap: 10px; }
.profile-avatar { width: 64px; height: 64px; display: grid; place-items: center; flex: none; border-radius: 22px; object-fit: cover; color: var(--color-on-primary); background: var(--color-primary); font-style: normal; font-size: 20px; }
.settings-stack { display: grid; gap: 14px; }
.settings-card, .metric-card, .workflow-card, .checkout-summary, .saved-card, .success-state, .empty-state { padding: 20px; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--color-surface); }
.settings-card h3, .metric-card h3 { margin: 0 0 12px; font-size: 17px; }
.settings-card > p, .metric-card > p, .empty-state p { color: var(--text-muted); font-size: 12px; line-height: 1.65; }
.metric-card { display: grid; gap: 12px; }
.metric-card > strong { font-size: 27px; }
.settings-list { display: grid; gap: 0; }
.settings-list > div { min-height: 50px; display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 12px; border-top: 1px solid var(--line-soft); font-size: 11px; }
.settings-list > div:first-child { border-top: 0; }
.danger-card { border-color: color-mix(in srgb, var(--color-danger) 35%, transparent); }
.team-members { display: grid; gap: 8px; }
.team-members article { padding: 11px; display: grid; grid-template-columns: minmax(130px,1fr) 105px minmax(120px,.65fr) auto auto; align-items: center; gap: 8px; border: 1px solid var(--line-soft); border-radius: var(--radius-md); }
.team-members article > div { min-width: 0; display: flex; flex-direction: column; }
.team-members article small { overflow: hidden; color: var(--text-muted); text-overflow: ellipsis; white-space: nowrap; }
.team-members select, .team-members input { min-width: 0; min-height: 36px; padding: 7px 9px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--color-surface-1); }
.compact-check { display: inline-flex; align-items: center; gap: 5px; color: var(--text-muted); font-size: 10px; white-space: nowrap; }
.icon-action { width: 32px; height: 32px; border: 0; border-radius: var(--radius-sm); background: var(--color-surface-1); cursor: pointer; }
.icon-action.danger { color: var(--color-danger); }
.checkout-summary { margin: 24px 0; display: grid; gap: 10px; }
.checkout-summary > div { display: flex; justify-content: space-between; gap: 20px; }
.checkout-summary > div:last-child { padding-top: 12px; border-top: 1px solid var(--line-soft); }
.saved-card { margin-bottom: 9px; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.success-state { text-align: center; }
.success-state h2 { font-size: 34px; }
.workflow-section { scroll-margin-top: 30px; }
.workflow-card { max-width: 760px; }
.business-quote { margin: 20px 0 0; padding: 16px; display: flex; align-items: center; justify-content: space-between; border-radius: var(--radius-md); background: var(--color-surface-1); }
.business-quote strong { font-size: 24px; }
.phone-field > span { display: grid; grid-template-columns: minmax(8.5rem, .5fr) minmax(0, 1fr); gap: 8px; }
.trial-state { margin: 10px auto 0; color: var(--text-muted); font-size: 11px; text-align: center; }
[data-business-payment] { margin-top: 18px; }
[data-business-payment] h3 { margin: 0 0 10px; font-size: 16px; }
.tap-card-shell { position: relative; min-height: 115px; overflow: hidden; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: #fff; }
.tap-card-host { position: relative; z-index: 1; min-height: 115px; background: #fff; }
.tap-card-skeleton { position: absolute; z-index: 2; inset: 0; background: linear-gradient(100deg, #f2f3f3 25%, #fff 45%, #f2f3f3 65%); background-size: 220% 100%; animation: tap-card-loading 1.25s ease-in-out infinite; }
@keyframes tap-card-loading { to { background-position: -220% 0; } }
.verification-inline { margin-top: 16px; }
.detected-badge { width: max-content; padding: 5px 8px; border-radius: 999px; color: var(--color-primary-ink); background: color-mix(in oklch, var(--color-primary) 14%, var(--color-surface)); font-size: 9px; font-weight: 700; }
/* Download pages (pages.js renderDownload / renderOsPage). OS logos are image
   files in their brand colours (assets/os/). */
.os-logo { width: 1.75rem; height: 1.75rem; display: block; object-fit: contain; }
.download-card { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; transition: border-color 150ms ease, box-shadow 150ms ease; }
.download-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.download-card .os-symbol { width: 3.5rem; height: 3.5rem; margin: 0 0 .85rem; }
.download-card .os-symbol .svg-glyph { width: 1.6rem; height: 1.6rem; }
.download-card h3 { margin: 0; font-size: 1.125rem; }
.download-card p { min-height: 0; margin: 0; font-size: .8125rem; }
.download-card-actions { width: 100%; margin-top: auto; padding-top: 1.4rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.download-card .download-card-actions a { font-size: .8125rem; font-weight: 600; }
.download-card-actions .button { display: inline-flex; align-items: center; gap: .4rem; }
.download-card-actions .button .svg-glyph { width: 1rem; height: 1rem; }
.download-card.is-detected { border-color: var(--color-primary); background: color-mix(in oklch, var(--color-primary) 5%, var(--color-surface)); box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary) 16%, transparent); }
.download-card { position: relative; }
.download-card .detected-badge { position: absolute; top: 1.1rem; inset-inline-end: 1.1rem; margin: 0; font-size: .6875rem; }
.download-how-steps { margin: 0; padding: 0; counter-reset: how; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.download-how-steps li { counter-increment: how; padding: 1.5rem; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--color-surface); }
.download-how-steps li::before { content: counter(how, decimal-leading-zero); display: block; margin-bottom: 1.1rem; color: var(--color-primary-ink); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; }
.download-how-steps h3 { margin: 0 0 .4rem; font-size: 1.0625rem; }
.download-how-steps p { margin: 0; color: var(--text-secondary); font-size: .875rem; line-height: 1.65; }

.download-back { margin-bottom: 1.5rem; color: var(--text-secondary); font-size: .875rem; font-weight: 600; }
.download-back:hover { color: var(--color-primary-ink); }
[data-live-download].download-hero-actions { margin-top: 1.75rem; flex-wrap: wrap; gap: .75rem 1rem; }
.download-hero-actions .button { min-height: 48px; padding-inline: 1.5rem; display: inline-flex; align-items: center; gap: .5rem; font-size: 1rem; }
.download-hero-actions .button .svg-glyph { width: 1.1rem; height: 1.1rem; }
.download-hero-actions [data-download-alt] { flex-basis: 100%; width: max-content; padding: 0; font-size: .8125rem; }
.pv-os-badge .os-logo { width: 36px; height: 36px; }
.pv-platforms .os-logo { width: 24px; height: 24px; }

/* The web choice's globe, in Nusuq colour wherever it stands for "Nusuq on the web". */
.web-logo { color: var(--color-primary); }

/* /web/ — the signed-in launcher, after the app's apps menu (.um-apps / .um-app). */
.web-apps-page { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(4rem, 8vw, 6rem); background: radial-gradient(50rem 22rem at 100% 0%, color-mix(in oklch, var(--color-primary) 10%, transparent), transparent 70%); }
.web-apps-head { margin-bottom: clamp(2rem, 5vw, 3.25rem); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; }
.web-apps-head h1 { margin: .35rem 0 .75rem; font-size: clamp(2.5rem, 6vw, 4rem); letter-spacing: -.03em; }
.web-apps-head .page-lead { max-width: 34rem; margin: 0; }
.web-apps-user { padding: .6rem .6rem .6rem .75rem; display: flex; align-items: center; gap: .75rem; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--color-surface); }
.web-apps-user[hidden] { display: none; }
.web-apps-avatar { width: 2.5rem; height: 2.5rem; flex: none; overflow: hidden; display: grid; place-items: center; border-radius: var(--radius-md); color: var(--color-on-primary, #fff); background: var(--color-primary); font-weight: 700; }
.web-apps-avatar img { width: 100%; height: 100%; object-fit: cover; }
.web-apps-who { min-width: 0; display: flex; flex-direction: column; }
.web-apps-who b { font-size: .875rem; }
.web-apps-who small { color: var(--text-muted); font-size: .75rem; }
.web-apps-groups { display: grid; gap: clamp(2rem, 4vw, 2.75rem); }
.web-apps-group[hidden] { display: none; }
.web-apps-group h2 { margin: 0 0 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line-soft); color: var(--text-muted); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
[dir="rtl"] .web-apps-group h2 { letter-spacing: 0; font-size: .875rem; }
.web-apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: 1.25rem .75rem; }
/* A tile is the app's icon on a wash of its own accent — no card around it. */
.web-app { padding: .5rem .25rem; display: flex; flex-direction: column; align-items: center; gap: .65rem; border-radius: var(--radius-lg); color: var(--text-secondary); text-align: center; transition: transform 180ms cubic-bezier(.2, .8, .2, 1), color 150ms ease; }
.web-app[hidden] { display: none; }
.web-app-icon { width: 5rem; height: 5rem; display: grid; place-items: center; border-radius: 1.5rem; background: color-mix(in oklch, var(--app-accent, var(--color-primary)) 16%, var(--color-surface)); transition: background 180ms ease, box-shadow 180ms ease; }
.web-app-icon img { width: 2.6rem; height: 2.6rem; object-fit: contain; transition: transform 180ms cubic-bezier(.2, .8, .2, 1); }
.web-app:hover,
.web-app:focus-visible { transform: translateY(-3px); color: var(--text-primary); outline: none; }
.web-app:hover .web-app-icon,
.web-app:focus-visible .web-app-icon { background: color-mix(in oklch, var(--app-accent, var(--color-primary)) 26%, var(--color-surface)); box-shadow: 0 14px 28px -18px color-mix(in oklch, var(--app-accent, var(--color-primary)) 80%, transparent); }
.web-app:hover .web-app-icon img { transform: scale(1.06); }
.web-app:focus-visible .web-app-icon { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.web-app-label { font-size: .875rem; font-weight: 500; line-height: 1.2; }
.web-apps-foot { margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; display: flex; align-items: center; justify-content: center; gap: .5rem; color: var(--text-secondary); font-size: .875rem; }
.web-apps-foot a { color: var(--color-primary-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 560px) {
  .web-apps-grid { grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr)); gap: 1rem .25rem; }
  .web-app-icon { width: 4rem; height: 4rem; border-radius: 1.2rem; }
  .web-app-icon img { width: 2.1rem; height: 2.1rem; }
  .web-app-label { font-size: .8125rem; }
}

.install-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(16rem, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.install-main h2 { margin: 0 0 1.75rem; font-size: clamp(1.75rem, 3vw, 2.25rem); }
.install-group + .install-group { margin-top: 2.25rem; padding-top: 2rem; border-top: 1px solid var(--line-soft); }
.install-group h3 { margin: 0 0 1.25rem; font-size: 1rem; }
.install-steps { margin: 0; padding: 0; counter-reset: install; list-style: none; }
.install-steps li { min-width: 0; position: relative; padding: 0 0 1.6rem; padding-inline-start: 3.25rem; counter-increment: install; }
.install-steps li:last-child { padding-bottom: 0; }
.install-steps li::before { content: counter(install); position: absolute; top: 0; inset-inline-start: 0; width: 2rem; height: 2rem; display: grid; place-items: center; border: 1px solid color-mix(in oklch, var(--color-primary) 40%, transparent); border-radius: 50%; color: var(--color-primary-ink); background: color-mix(in oklch, var(--color-primary) 14%, var(--color-surface)); font-size: .8125rem; font-weight: 700; }
.install-steps li::after { content: ""; position: absolute; top: 2.4rem; bottom: .4rem; inset-inline-start: calc(1rem - .5px); width: 1px; background: var(--line-soft); }
.install-steps li:last-child::after { display: none; }
.install-steps p { margin: .3rem 0 0; color: var(--text-secondary); font-size: .9375rem; line-height: 1.7; }
.install-steps b { color: var(--text-primary); font-weight: 650; }
.install-steps p code { padding: .1em .35em; border-radius: var(--radius-sm); background: var(--color-surface-2); font: .85em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.install-code { margin-top: .75rem; padding: .7rem .7rem .7rem 1rem; display: flex; align-items: flex-start; gap: .75rem; border-radius: var(--radius-md); color: #e7edf0; background: #151c23; }
.install-code pre { flex: 1; min-width: 0; margin: 0; overflow-x: auto; }
.install-code code { color: inherit; font: .8125rem/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; }
.install-copy { flex: none; padding: .3rem .65rem; border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--radius-sm); color: inherit; background: transparent; font: inherit; font-size: .75rem; cursor: pointer; }
.install-copy:hover { background: rgba(255, 255, 255, .1); }
.install-note { margin: 1.75rem 0 0; padding: .9rem 1rem; display: flex; align-items: flex-start; gap: .6rem; border-radius: var(--radius-md); color: var(--text-secondary); background: color-mix(in oklch, var(--color-primary) 8%, var(--color-surface)); font-size: .875rem; line-height: 1.6; }
.install-note .svg-glyph { margin-top: .2em; color: var(--color-primary-ink); }
.install-side { position: sticky; top: 88px; display: grid; gap: var(--space-3); }
.install-side-card { padding: 1.25rem; display: flex; gap: .9rem; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--color-surface); }
.install-side-card > span { width: 2.25rem; height: 2.25rem; flex: none; display: grid; place-items: center; border-radius: var(--radius-md); color: var(--color-primary-ink); background: color-mix(in oklch, var(--color-primary) 12%, var(--color-surface)); }
.install-side-card h3 { margin: .15rem 0 .35rem; font-size: .9375rem; }
.install-side-card p { margin: 0; color: var(--text-secondary); font-size: .8125rem; line-height: 1.65; }
.install-side-card a { color: var(--color-primary-ink); text-decoration: underline; text-underline-offset: 2px; }
.install-others-section { padding-block: 3rem 4.5rem; }
.install-others-section h2 { margin: 0 0 1rem; font-size: 1.25rem; }
.install-others { display: flex; flex-wrap: wrap; gap: .75rem; }
.install-other { padding: .7rem 1.1rem; display: inline-flex; align-items: center; gap: .6rem; border: 1px solid var(--line-soft); border-radius: var(--radius-md); color: var(--text-primary); background: var(--color-surface); font-size: .875rem; font-weight: 600; transition: border-color 150ms ease; }
.install-other:hover { border-color: var(--color-primary); }
.install-other .os-logo,
.install-other .svg-glyph { width: 1.25rem; height: 1.25rem; }
@media (max-width: 960px) {
  .install-layout { grid-template-columns: minmax(0, 1fr); }
  .install-side { position: static; }
  .download-how-steps { grid-template-columns: 1fr; }
}
[data-live-download] { margin-top: 22px; display: flex; align-items: center; gap: 12px; }
[data-live-download] small { color: var(--text-muted); }

@media (max-width: 760px) {
  .team-members article { grid-template-columns: 1fr auto; }
  .team-members article > div { grid-column: 1 / -1; }
  .settings-list > div { grid-template-columns: 1fr auto; }
  [data-live-download] { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 820px) {
  /* Same box as the language button beside it. */
  .menu-button { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border: 1px solid var(--line-soft); border-radius: var(--radius-md); color: var(--text-secondary); background: transparent; cursor: pointer; }
  .menu-button:hover,
  .menu-button[aria-expanded="true"] { color: var(--color-primary-ink); border-color: var(--color-primary); background: color-mix(in oklch, var(--color-primary) 8%, transparent); }
  .menu-button .menu-button-glyph { width: 17px; height: 17px; }
  /* Full-screen menu under the header (the header is sticky, so it is always at
     the top of the viewport; the panel hangs from it and fills the rest). */
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100dvh - 100%);
    padding: 1.5rem max(var(--page-gutter), 1.25rem) calc(1.5rem + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0;
    border-radius: 0;
    /* Solid: a blurred backdrop nested in the header's own blur shows the page through. */
    background: var(--color-surface);
    box-shadow: none;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 240ms ease, transform 240ms ease, visibility 0s linear 240ms;
  }
  .site-nav.nav-open { visibility: visible; pointer-events: auto; opacity: 1; transform: none; transition-delay: 0s; }
  .site-nav a {
    padding: .85rem 0;
    border-bottom: 1px solid var(--line-soft);
    color: var(--text-primary);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -.02em;
    opacity: 0;
    transform: translateY(6px);
    transition: color 150ms ease, opacity 260ms ease, transform 260ms ease;
  }
  [dir="rtl"] .site-nav a { letter-spacing: 0; }
  .site-nav.nav-open a,
  .site-nav.nav-open .nav-menu-foot { opacity: 1; transform: none; transition-delay: 0s, calc(40ms + var(--i, 0) * 30ms), calc(40ms + var(--i, 0) * 30ms); }
  /* The full-screen menu is a list, not a strip: rows with dividers, no hover
     fill — only the page you're on keeps its tinted chip. */
  .site-nav > a { display: block; min-height: 0; border-radius: 0; box-shadow: none; }
  .site-nav > a:hover { color: var(--color-primary-ink); background: none; }
  .site-nav > a[aria-current="page"] {
    margin-inline: -.75rem;
    padding-inline: .75rem;
    border-radius: var(--radius-md);
    border-bottom-color: transparent;
    color: var(--color-primary-ink);
    background: color-mix(in oklch, var(--color-primary) 14%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-primary) 14%, transparent);
  }
  .nav-menu-foot { margin-top: auto; padding-top: 1.75rem; display: flex; flex-direction: column; opacity: 0; transform: translateY(6px); transition: opacity 260ms ease, transform 260ms ease; }
  .nav-menu-foot .button { width: 100%; min-height: 48px; justify-content: center; font-size: 1rem; }
  html.nq-menu-open { overflow: hidden; }
}

@media (max-width: 720px) {
  :root { --page-gutter: 1rem; --section-space: 4.25rem; }
  .site-header { width: 100%; padding-inline: var(--page-gutter); }
  .site-footer { padding: 3rem var(--page-gutter) 1.25rem; }
  .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .hero-copy h1,
  .page-hero h1 { font-size: clamp(2.75rem, 14vw, 4rem); }
  .visual-mark { border-radius: var(--radius-xl); }
  .auth-card { padding-inline: 0; }
  .docs-nav { max-height: none; }
  .home-plan-grid,
  .builder-layout,
  .brand-logo-grid,
  .brand-rules { grid-template-columns: 1fr; }
  .brand-type-specimen { padding: var(--space-5); }
  .brand-type-weights p { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .brand-weight-sample { grid-column: 1 / -1; }
  .detected-platform { align-items: flex-start; flex-direction: column; }
  .detected-platform small { margin-inline-start: 0; }
  .estimate-card { padding: var(--space-4); }
  .bz-seat { grid-template-columns: minmax(0, 1fr) auto 28px; }
  .bz-seat-plan { grid-row: 2; grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: .5rem; }
  .content-card,
  .showcase-app,
  .plan-card,
  .account-panel,
  .download-card,
  .market-card { padding: 1.25rem; }
  .content-card { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .ui-collapse { transition: none; }
}

/* Product-faithful Nusuq views. */
.product-stage { overflow: hidden; }
.nq-shell-preview {
  width: 100%;
  min-height: 560px;
  height: 100%;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  color: var(--text-primary);
  background: var(--color-surface-1);
}
.nq-app-rail {
  position: relative;
  z-index: 2;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border-inline-end: 1px solid var(--line-soft);
  background: var(--color-surface);
}
.nq-rail-avatar,
.nq-app-rail button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-md);
}
.nq-rail-avatar { margin-bottom: 4px; color: var(--color-on-primary); background: #bd7767; font-size: 9px; font-weight: 600; }
.nq-app-rail button { position: relative; padding: 0; color: var(--text-muted); background: transparent; }
.nq-app-rail button .svg-glyph { width: 17px; height: 17px; }
.nq-app-rail button.is-active { color: var(--color-primary-ink); background: color-mix(in oklch, var(--color-primary) 17%, var(--color-surface)); }
.nq-app-rail button i { position: absolute; inset-block-start: 6px; inset-inline-end: 7px; width: 5px; height: 5px; border: 1px solid var(--color-surface); border-radius: 50%; background: var(--color-danger); }
.nq-rail-spacer { flex: 1; }
.nq-dashboard-preview { min-width: 0; padding: 24px; background: var(--color-surface-1); }
.nq-dashboard-header { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.nq-dashboard-header p { margin: 0 0 3px; display: flex; align-items: center; gap: 7px; color: var(--text-muted); font-size: 9px; }
.nq-dashboard-header p i { font-style: normal; opacity: .5; }
.nq-dashboard-header h2 { margin: 0; font-size: 22px; line-height: 1.15; font-weight: 600; letter-spacing: 0; }
.nq-dashboard-header small { color: var(--text-muted); font-size: 9px; }
.nq-dashboard-actions { display: flex; align-items: center; gap: 7px; }
.nq-dashboard-actions button {
  height: 32px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  background: var(--color-surface);
  font: inherit;
  font-size: 9px;
}
.nq-dashboard-actions button .svg-glyph { width: 12px; height: 12px; }
.nq-dashboard-actions button.is-primary { color: var(--color-on-primary); border-color: var(--color-primary); background: var(--color-primary); }
.nq-presence { display: flex; padding-inline-end: 4px; }
.nq-presence i,
.nq-doc-presence i,
.doc-window section > header > span i { width: 25px; height: 25px; margin-inline-start: -6px; display: grid; place-items: center; border: 2px solid var(--color-surface-1); border-radius: 50%; color: white; background: #d37f69; font-style: normal; font-size: 7px; }
.nq-presence i:nth-child(2),
.nq-doc-presence i:nth-child(2),
.doc-window section > header > span i:nth-child(2) { background: #708bca; }
.nq-presence i:nth-child(3) { background: #2f3942; }
.nq-widget-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 192px 190px; gap: 12px; }
.nq-widget {
  min-width: 0;
  padding: 14px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.nq-task-widget,
.nq-calendar-widget { grid-column: span 6; }
.nq-drive-widget { grid-column: span 7; }
.nq-notes-widget { grid-column: span 5; }
.nq-widget > header { margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nq-widget > header > span { display: inline-flex; align-items: center; gap: 7px; }
.nq-widget > header img { width: 23px; height: 23px; border-radius: 6px; }
.nq-widget > header b { font-size: 10px; font-weight: 600; }
.nq-widget > header time,
.nq-widget > header small { color: var(--text-muted); font-size: 8px; }
.nq-widget > header button { width: 25px; height: 25px; padding: 0; display: grid; place-items: center; border: 0; border-radius: var(--radius-sm); color: var(--text-muted); background: transparent; }
.nq-widget > header button .svg-glyph { width: 13px; height: 13px; }
.nq-task-row { min-height: 43px; padding-block: 6px; display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line-soft); }
.nq-task-row > i { width: 14px; height: 14px; display: grid; place-items: center; flex: none; border: 1.4px solid var(--line-strong); border-radius: var(--radius-sm); }
.nq-task-row > i.is-done { color: var(--color-on-primary); border-color: var(--color-primary); background: var(--color-primary); }
.nq-task-row > i .svg-glyph { width: 9px; height: 9px; }
.nq-task-row p,
.nq-event p,
.nq-file-row p { min-width: 0; flex: 1; margin: 0; display: flex; flex-direction: column; gap: 1px; }
.nq-task-row p b,
.nq-event p b,
.nq-file-row p b { overflow: hidden; font-size: 9px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.nq-task-row p small,
.nq-event p small,
.nq-file-row p small { color: var(--text-muted); font-size: 7px; }
.nq-task-row > span { padding: 2px 5px; border-radius: var(--radius-full); color: #8f4d3d; background: #ffe0d8; font-size: 7px; }
.nq-date-strip { height: 46px; margin-bottom: 6px; display: grid; grid-template-columns: repeat(5, 1fr); border-block: 1px solid var(--line-soft); }
.nq-date-strip > span { display: grid; place-items: center; align-content: center; gap: 1px; font-size: 9px; }
.nq-date-strip small { color: var(--text-muted); font-size: 6px; }
.nq-date-strip .is-today { color: var(--color-on-primary); border-radius: var(--radius-sm); background: var(--color-primary); }
.nq-date-strip .is-today small { color: inherit; opacity: .75; }
.nq-event { min-height: 37px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid var(--line-soft); }
.nq-event > i { width: 3px; height: 24px; border-radius: 3px; background: var(--palette-blue-300); }
.nq-event.is-orange > i { background: var(--palette-orange-300); }
.nq-event > time { color: var(--text-muted); font-size: 7px; }
.nq-file-row { min-height: 50px; padding-block: 6px; display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line-soft); }
.nq-file-row > span { width: 28px; height: 28px; flex: none; }
.nq-file-row img { width: 100%; height: 100%; border-radius: 7px; }
.nq-file-row > time { color: var(--text-muted); font-size: 7px; }
.nq-drive-widget footer { margin-top: 7px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; color: var(--text-muted); font-size: 7px; }
.nq-drive-widget footer > i { height: 4px; overflow: hidden; border-radius: 4px; background: var(--color-surface-2); }
.nq-drive-widget footer > i b { width: 18%; height: 100%; display: block; background: var(--color-primary); }
.nq-note-card { padding: 12px; border-radius: var(--radius-md); background: var(--color-warning); }
.nq-note-card small,
.nq-note-card b,
.nq-note-card p,
.nq-note-card span { display: block; }
.nq-note-card small { opacity: .55; font-size: 7px; }
.nq-note-card b { margin-top: 5px; font-size: 11px; font-weight: 600; }
.nq-note-card p { margin: 4px 0 8px; font-size: 8px; line-height: 1.4; }
.nq-note-card span { color: color-mix(in oklch, var(--color-on-surface) 58%, transparent); font-size: 7px; }
.nq-note-lines { padding: 10px 5px; display: grid; gap: 6px; }
.nq-note-lines i { width: 100%; height: 4px; border-radius: 4px; background: var(--color-surface-2); }
.nq-note-lines i:last-child { width: 62%; }

.nq-search-preview.search-demo { min-height: 245px; padding: 0; display: grid; grid-template-columns: 42px minmax(0, 1fr); overflow: hidden; }
.nq-search-rail { padding: 8px 6px; display: flex; flex-direction: column; align-items: center; gap: 6px; border-inline-end: 1px solid var(--line-soft); background: var(--color-surface); }
.nq-search-rail > span,
.nq-search-rail > i { width: 29px; height: 29px; display: grid; place-items: center; border-radius: var(--radius-md); font-style: normal; }
.nq-search-rail > span { color: white; background: #bd7767; font-size: 7px; }
.nq-search-rail > i { color: var(--text-muted); }
.nq-search-rail > i.is-active { color: var(--color-primary-ink); background: color-mix(in oklch, var(--color-primary) 17%, var(--color-surface)); }
.nq-search-rail .svg-glyph { width: 14px; height: 14px; }
.nq-search-panel { min-width: 0; padding: 12px; background: var(--color-surface); }
.nq-search-preview .search-demo-input { height: 40px; border-color: var(--color-primary); background: var(--color-surface-1); box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-primary) 14%, transparent); }
.nq-search-preview .search-demo-input > .svg-glyph { width: 14px; height: 14px; color: var(--text-muted); }
.nq-search-preview .search-demo-input b { min-width: 0; overflow: hidden; font-size: 10px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.nq-search-preview kbd { padding: 2px 5px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); color: var(--text-muted); background: var(--color-surface); font-size: 7px; }
.nq-search-group { padding: 9px 6px 4px; display: flex; justify-content: space-between; color: var(--text-muted); font-size: 7px; }
.nq-search-preview .search-demo-row { min-height: 44px; padding: 6px; border: 0; border-radius: var(--radius-md); }
.nq-search-preview .search-demo-row.is-selected { background: color-mix(in oklch, var(--color-primary) 12%, var(--color-surface)); }
.nq-search-preview .demo-icon { width: 29px; height: 29px; border-radius: var(--radius-md); }
.nq-search-preview .search-demo-row p { font-size: 9px; }
.nq-search-preview .search-demo-row p b { font-weight: 500; }
.nq-search-preview .search-demo-row small { display: flex; gap: 3px; color: var(--text-muted); font-size: 7px; }
.nq-search-preview .search-demo-row > i .svg-glyph { width: 12px; height: 12px; }
.nq-search-panel > footer { margin-top: 4px; padding: 7px 5px 0; display: flex; justify-content: flex-end; gap: 12px; border-top: 1px solid var(--line-soft); color: var(--text-muted); font-size: 7px; }
.nq-search-panel > footer span { display: inline-flex; align-items: center; gap: 4px; }
.nq-search-panel > footer i { font-style: normal; }
.nq-search-panel > footer .svg-glyph { width: 10px; height: 10px; }

.nq-doc-preview.collab-demo { width: 54%; height: 330px; padding: 0; overflow: visible; border: 1px solid var(--line-soft); border-bottom: 0; transform: rotate(.35deg); }
.nq-doc-header { height: 45px; padding: 0 10px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid var(--line-soft); }
.nq-doc-app { width: 26px; height: 26px; flex: none; }
.nq-doc-app img { width: 100%; height: 100%; border-radius: 7px; }
.nq-doc-header p { min-width: 0; flex: 1; margin: 0; display: flex; flex-direction: column; line-height: 1.2; }
.nq-doc-header p b { overflow: hidden; font-size: 8px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.nq-doc-header p small { display: flex; align-items: center; gap: 2px; color: var(--text-muted); font-size: 6px; }
.nq-doc-header p small .svg-glyph { width: 7px; height: 7px; color: var(--color-primary-ink); }
.nq-doc-presence { display: flex; }
.nq-doc-presence i { width: 21px; height: 21px; border-color: var(--color-surface); font-size: 6px; }
.nq-doc-header button { width: 27px; height: 27px; padding: 0; display: grid; place-items: center; border: 1px solid var(--line-soft); border-radius: var(--radius-md); color: var(--text-muted); background: var(--color-surface); }
.nq-doc-header button .svg-glyph { width: 12px; height: 12px; }
.nq-doc-ribbon { height: 31px; padding-inline: 11px; display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--line-soft); color: var(--text-secondary); background: var(--color-surface-1); }
.nq-doc-ribbon > i { width: 21px; height: 21px; display: grid; place-items: center; border-radius: var(--radius-sm); font-style: normal; }
.nq-doc-ribbon > i .svg-glyph { width: 10px; height: 10px; }
.nq-doc-ribbon > span { width: 1px; height: 14px; margin-inline: 2px; background: var(--line-soft); }
.nq-doc-page { position: relative; width: 76%; min-height: 255px; margin: 14px auto 0; padding: 23px 25px; border: 1px solid var(--line-soft); border-bottom: 0; background: var(--color-surface); box-shadow: var(--shadow-sm); }
.nq-doc-page > small { color: var(--text-muted); font-size: 6px; letter-spacing: .12em; }
.nq-doc-page h4 { position: relative; margin: 12px 0 14px; font: 600 21px/1.15 var(--font-primary); letter-spacing: -.01em; }
.nq-doc-page h4 .cursor { inset-inline-end: 5px; inset-inline-start: auto; top: -2px; height: 25px; background: #668bd2; }
.nq-doc-page h4 b { position: absolute; inset-inline-end: -18px; top: -13px; padding: 2px 4px; border-radius: var(--radius-sm); color: white; background: #668bd2; font-size: 5px; }
.nq-doc-page > p { margin: 0; color: var(--text-secondary); font-size: 10px; line-height: 1.6; }
.nq-doc-page mark { color: inherit; background: var(--color-warning); }
.nq-doc-lines { margin-top: 15px; display: grid; gap: 6px; }
.nq-doc-lines i { height: 4px; border-radius: 4px; background: var(--color-surface-2); }
.nq-doc-lines i:last-child { width: 68%; }
.nq-doc-preview .comment-pill { inset-inline-end: -28px; right: auto; bottom: 66px; color: white; }

.desktop-art .window-bar { height: 35px; padding: 0 10px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-soft); color: var(--text-secondary); background: var(--color-surface-1); font-size: 8px; }
.desktop-art .window-bar > span { min-width: 0; display: inline-flex; align-items: center; gap: 6px; }
.desktop-art .window-bar > span img { width: 19px; height: 19px; border-radius: 5px; }
.desktop-art .window-bar > span b { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.nq-mini-rail { width: 42px !important; padding: 8px 6px !important; display: flex; flex-direction: column; align-items: center; gap: 7px; border-inline-end: 1px solid var(--line-soft); background: var(--color-surface) !important; }
.nq-mini-rail > i,
.nq-mini-rail > span { width: 28px; height: 28px; display: grid !important; place-items: center; flex: none !important; border-radius: var(--radius-md) !important; font-style: normal; }
.nq-mini-rail > i { color: white; background: #bd7767; font-size: 6px; }
.nq-mini-rail > span { color: var(--text-muted); }
.nq-mini-rail > span.active { background: color-mix(in oklch, var(--color-primary) 17%, var(--color-surface)); }
.nq-mini-rail > span img { width: 20px; height: 20px; border-radius: 5px; }
.nq-mini-rail .svg-glyph { width: 12px; height: 12px; }
.nq-desktop-projects .project-window main { padding: 18px; display: block; background: var(--color-surface-1); }
.project-window main > header { display: flex; align-items: flex-end; justify-content: space-between; }
.project-window main > header p { margin: 0; display: flex; flex-direction: column; }
.project-window main > header small { color: var(--text-muted); font-size: 7px; }
.project-window main > header b { font-size: 15px; font-weight: 600; }
.project-window main > header button { width: 28px; height: 28px; padding: 0; display: grid; place-items: center; border: 0; border-radius: var(--radius-md); color: white; background: var(--color-primary); }
.project-window main > header button .svg-glyph { width: 12px; height: 12px; }
.nq-project-grid { margin-top: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.nq-project-grid article { min-width: 0; min-height: 130px; padding: 10px; display: flex; flex-direction: column; border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: var(--color-surface); }
.nq-project-grid article > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--color-primary-ink); background: color-mix(in oklch, var(--color-primary) 18%, var(--color-surface)); font-size: 7px; }
.nq-project-grid article > b { margin-top: auto; overflow: hidden; font-size: 8px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.nq-project-grid article > small { color: var(--text-muted); font-size: 6px; }
.nq-desktop-docs .doc-window > section { min-width: 0; flex: 1; display: flex; flex-direction: column; background: var(--color-surface-1); }
.doc-window section > header { height: 43px; padding: 0 12px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line-soft); background: var(--color-surface); }
.doc-window section > header p { min-width: 0; flex: 1; margin: 0; display: flex; flex-direction: column; }
.doc-window section > header p b { overflow: hidden; font-size: 9px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.doc-window section > header p small { display: inline-flex; align-items: center; gap: 3px; color: var(--text-muted); font-size: 6px; }
.doc-window section > header p .svg-glyph { width: 7px; height: 7px; color: var(--color-primary-ink); }
.doc-window section > header > span { display: flex; }
.doc-window section > header > span i { width: 21px; height: 21px; border-color: var(--color-surface); font-size: 6px; }
.doc-window section > header button { width: 27px; height: 27px; padding: 0; display: grid; place-items: center; border: 0; border-radius: var(--radius-md); color: white; background: var(--color-primary); }
.doc-window section > header button .svg-glyph { width: 11px; height: 11px; }
.nq-desktop-docs .nq-doc-ribbon { height: 29px; background: var(--color-surface); }
.nq-desktop-docs .doc-window main { width: 70%; min-height: 310px; margin: 14px auto 0; padding: 30px 35px; border: 1px solid var(--line-soft); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.nq-desktop-docs .doc-window main > small { color: var(--text-muted); font-size: 6px; letter-spacing: .12em; }
.nq-desktop-docs .doc-window main h4 { margin: 12px 0 15px; max-width: 340px; font: 600 23px/1.1 var(--font-primary); letter-spacing: -.01em; }
.nq-desktop-docs .doc-window main > p { height: auto; margin: 0; color: var(--text-secondary); background: transparent; font-size: 8px; line-height: 1.55; }
.nq-desktop-docs .doc-window main mark { width: 42%; height: 5px; margin-top: 15px; display: block; background: var(--color-warning); }

@media (max-width: 820px) {
  .nq-dashboard-preview { padding: 18px; }
  .nq-dashboard-actions button span { display: none; }
  .nq-dashboard-actions button { width: 32px; padding: 0; justify-content: center; }
  .nq-widget-grid { grid-template-rows: 192px 190px; }
  .nq-task-widget,
  .nq-calendar-widget,
  .nq-drive-widget,
  .nq-notes-widget { grid-column: span 6; }
  .nq-doc-preview.collab-demo { width: 58%; }
}

@media (max-width: 560px) {
  .nq-shell-preview { min-height: 565px; grid-template-columns: 48px minmax(0, 1fr); }
  .nq-app-rail { padding: 10px 6px; }
  .nq-rail-avatar,
  .nq-app-rail button { width: 34px; height: 34px; }
  .nq-dashboard-preview { padding: 14px 10px; }
  .nq-dashboard-header { min-height: 68px; align-items: flex-start; }
  .nq-dashboard-header p,
  .nq-dashboard-header small,
  .nq-dashboard-actions .nq-presence { display: none; }
  .nq-dashboard-header h2 { margin-top: 7px; font-size: 17px; }
  .nq-widget-grid { margin-top: 8px; grid-template-columns: 1fr; grid-template-rows: 210px 210px; gap: 10px; }
  .nq-task-widget,
  .nq-calendar-widget { grid-column: auto; }
  .nq-drive-widget,
  .nq-notes-widget { display: none; }
  .nq-search-preview.search-demo { left: 16px; right: 16px; grid-template-columns: 36px minmax(0, 1fr); }
  .nq-search-rail { padding-inline: 3px; }
  .nq-search-rail > span,
  .nq-search-rail > i { width: 27px; height: 27px; }
  .nq-search-panel { padding: 9px; }
  .nq-search-panel > footer { display: none; }
  .nq-doc-preview.collab-demo { width: 91%; right: 4.5%; height: 320px; }
  [dir="rtl"] .nq-doc-preview.collab-demo { right: 4.5%; }
  .nq-doc-page { width: 82%; padding-inline: 18px; }
  .nq-doc-preview .comment-pill { inset-inline-end: -12px; }
  .desktop-art .nq-mini-rail { width: 36px !important; padding-inline: 4px !important; }
  .nq-mini-rail > i,
  .nq-mini-rail > span { width: 27px; height: 27px; }
  .nq-desktop-docs .doc-window main { width: 78%; min-height: 250px; padding: 24px 20px; }
  .nq-desktop-docs .doc-window main h4 { font-size: 18px; }
  .nq-project-grid article:nth-child(3) { display: none; }
  .nq-project-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop packages use the reduced app-window rail: no launcher or pages. */
.nq-desktop-rail { padding-top: 8px !important; gap: 6px; border: 0; background: var(--color-surface-1) !important; }
.nq-desktop-rail > span.active { background: transparent; }
.nq-desktop-projects .project-window main.nq-projects-page { padding: 0; display: block; background: var(--color-surface); }
.nq-projects-page > header { height: 48px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; }
.nq-projects-page > header > span { display: inline-flex; align-items: center; gap: 8px; }
.nq-projects-page > header img { width: 24px; height: 24px; border-radius: 6px; }
.nq-projects-page > header b { font-size: 13px; font-weight: 600; }
.nq-projects-page > header button { width: auto; height: 28px; padding: 0 8px; display: inline-flex; align-items: center; gap: 5px; border: 0; border-radius: var(--radius-md); color: var(--color-on-primary); background: var(--color-primary); font: inherit; }
.nq-projects-page > header button .svg-glyph { width: 11px; height: 11px; }
.nq-projects-page > header button i { font-size: 7px; font-style: normal; }
.nq-projects-page > nav { height: 31px; padding: 0 14px; display: flex; align-items: center; gap: 2px; overflow: hidden; }
.nq-projects-page > nav button { align-items: center; height: 23px; padding: 0 7px; flex: none; border: 0; border-radius: var(--radius-md); color: var(--text-secondary); background: transparent; font: inherit; font-size: 7px; }
.nq-projects-page > nav button.is-active { color: var(--color-primary-ink); background: color-mix(in oklch, var(--color-primary) 14%, transparent); }
.nq-project-filters { margin: 10px 14px 0; display: flex; align-items: center; justify-content: space-between; }
.nq-project-filters > span { padding: 2px; display: inline-flex; border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: var(--color-surface-1); }
.nq-project-filters button { height: 24px; padding: 0 7px; display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line-soft); border-radius: var(--radius-md); color: var(--text-secondary); background: var(--color-surface); font: inherit; font-size: 7px; }
.nq-project-filters > span button { border: 0; background: transparent; }
.nq-project-filters > span button.is-active { color: var(--color-primary-ink); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.nq-project-filters button .svg-glyph { width: 9px; height: 9px; }
.nq-project-list { margin: 3px 14px 0; display: grid; }
.nq-project-list article { min-height: 49px; padding: 8px 0; display: grid; grid-template-columns: minmax(0, 1fr) 100px; align-items: center; gap: 12px; border-bottom: 1px solid var(--line-soft); }
.nq-project-list article > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.nq-project-list article > div > b { overflow: hidden; font-size: 8px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.nq-project-list article > div > small { overflow: hidden; color: var(--text-muted); font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.nq-project-list article > div > small i { margin-inline-end: 4px; padding: 2px 4px; border-radius: var(--radius-sm); color: var(--color-primary-ink); background: color-mix(in oklch, var(--color-primary) 12%, transparent); font-style: normal; }
.nq-project-list article > span { display: flex; flex-direction: column; gap: 3px; }
.nq-project-list article > span > i { height: 4px; overflow: hidden; border-radius: 4px; background: var(--color-surface-2); }
.nq-project-list article > span > i b { width: var(--p); height: 100%; display: block; background: var(--color-primary); }
.nq-project-list article > span > small { color: var(--text-muted); font-size: 6px; }

.nq-desktop-docs .doc-window > section.nq-desktop-doc-page { min-width: 0; flex: 1; display: flex; flex-direction: column; background: var(--color-surface-1); }
.nq-desktop-doc-page > header { height: 48px; padding: 0 10px; display: flex; align-items: center; gap: 5px; border: 0; background: var(--color-surface); }
.nq-desktop-doc-page > header > button { width: 25px; height: 25px; padding: 0; display: grid; place-items: center; flex: none; border: 0; border-radius: var(--radius-md); color: var(--text-muted); background: transparent; }
.nq-desktop-doc-page > header > button .svg-glyph { width: 11px; height: 11px; }
.nq-desktop-doc-page > header > img { width: 24px; height: 24px; border-radius: 6px; }
.nq-desktop-doc-page > header > p { min-width: 0; flex: 1; margin: 0; }
.nq-desktop-doc-page > header > p b { display: block; overflow: hidden; font-size: 9px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.nq-desktop-doc-page > header > span { display: flex; }
.nq-desktop-doc-page > header > span i { width: 21px; height: 21px; margin-inline-start: -4px; display: grid; place-items: center; border: 2px solid var(--color-surface); border-radius: var(--radius-md); background: color-mix(in oklch, #d27d69 28%, var(--color-surface)); font-style: normal; font-size: 6px; }
.nq-desktop-doc-page > header > span i:last-child { background: color-mix(in oklch, #718bc8 28%, var(--color-surface)); }
.nq-desktop-doc-page > .nq-real-doc-ribbon { padding: 0 8px 7px; }
.nq-desktop-doc-desk { min-height: 0; flex: 1; overflow: hidden; background: var(--color-surface-1); }
.nq-desktop-docs .nq-desktop-doc-desk > main { width: 70%; min-height: 300px; margin: 12px auto 0; padding: 28px 32px; border: 1px solid var(--line-soft); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.nq-desktop-docs .nq-desktop-doc-desk > main > small { color: var(--text-muted); font-size: 6px; letter-spacing: .12em; }
.nq-desktop-docs .nq-desktop-doc-desk > main h4 { margin: 12px 0 14px; font: 600 22px/1.1 var(--font-primary); letter-spacing: -.01em; }
.nq-desktop-docs .nq-desktop-doc-desk > main > p { height: auto; margin: 0; color: var(--text-secondary); background: transparent; font-size: 8px; line-height: 1.55; }
.nq-desktop-docs .nq-desktop-doc-desk > main mark { width: 42%; height: 5px; margin-top: 15px; display: block; background: var(--color-warning); }

@media (max-width: 560px) {
  .nq-projects-page > header button i { display: none; }
  .nq-projects-page > nav button:nth-child(n+4) { display: none; }
  .nq-project-list article { grid-template-columns: minmax(0, 1fr) 70px; }
  .nq-desktop-doc-page > header > span { display: none; }
  .nq-desktop-doc-page > .nq-real-doc-ribbon nav button:nth-child(n+4) { display: none; }
  .nq-desktop-docs .nq-desktop-doc-desk > main { width: 78%; min-height: 245px; padding: 22px 18px; }
}

/* Source-faithful product canvas: production rail + 16-column starter page. */
.nq-shell-preview { grid-template-columns: 60px minmax(0, 1fr); }
.nq-app-rail { padding: 16px 12px; gap: 12px; border: 0; background: var(--color-surface-1); }
.nq-rail-avatar { margin: 0; color: var(--color-primary-ink); background: var(--color-surface); font-size: 8px; }
.nq-app-rail button { color: var(--text-muted); background: transparent; }
.nq-app-rail button.is-active { color: var(--text-muted); background: transparent; }
.nq-dashboard-preview.nq-real-dashboard { padding: 20px; background: var(--color-surface); }
.nq-real-grid {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  grid-template-rows: repeat(7, 62px);
  gap: 8px;
  direction: ltr;
}
.nq-real-grid > * { direction: var(--page-direction, ltr); }
[dir="rtl"] .nq-real-grid > * { --page-direction: rtl; }
.nq-grid-separator { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; gap: 12px; color: var(--text-muted); font-size: 8px; }
.nq-grid-separator::after { content: ""; height: 1px; flex: 1; background: var(--line-soft); }
.nq-real-widget { min-width: 0; min-height: 0; padding: 12px; overflow: hidden; border: 0; border-radius: 15px; color: var(--text-primary); background: var(--color-surface); box-shadow: none; }
.nq-real-widget header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.nq-real-widget header b { font-size: 10px; font-weight: 600; }
.nq-real-widget header small { color: var(--text-muted); font-size: 7px; }
.nq-clock-widget { grid-column: 1 / span 2; grid-row: 2 / span 2; display: grid; place-items: center; align-content: center; gap: 6px; background: var(--color-surface-1); }
.nq-clock-face { position: relative; width: 58px; height: 58px; border: 1px solid var(--line-strong); border-radius: 50%; }
.nq-clock-face::before { content: "12"; position: absolute; inset-block-start: 4px; inset-inline: 0; text-align: center; color: var(--text-muted); font-size: 6px; }
.nq-clock-face::after { content: "6"; position: absolute; inset-block-end: 4px; inset-inline: 0; text-align: center; color: var(--text-muted); font-size: 6px; }
.nq-clock-face > i:first-child { position: absolute; left: 28px; top: 14px; width: 2px; height: 17px; border-radius: 2px; background: var(--text-primary); transform: rotate(28deg); transform-origin: 50% 100%; }
.nq-clock-face > i:nth-child(2) { position: absolute; left: 28px; top: 27px; width: 18px; height: 2px; border-radius: 2px; background: var(--color-primary); transform: rotate(18deg); transform-origin: 0 50%; }
.nq-clock-face > b { position: absolute; left: 26px; top: 26px; width: 6px; height: 6px; border-radius: 50%; background: var(--text-primary); }
.nq-clock-widget > small { color: var(--text-muted); font-size: 7px; }
.nq-date-widget { grid-column: 3 / span 2; grid-row: 2 / span 2; display: flex; flex-direction: column; align-items: center; justify-content: center; background: color-mix(in oklch, var(--color-primary) 7%, var(--color-surface)); }
.nq-date-widget small { color: var(--color-primary-ink); font-size: 7px; font-weight: 600; letter-spacing: .08em; }
.nq-date-widget strong { font-size: 30px; line-height: 1.1; font-weight: 600; }
.nq-date-widget span { color: var(--text-muted); font-size: 8px; }
.nq-next-widget { grid-column: 5 / span 4; grid-row: 2 / span 4; background: var(--color-surface-1); }
.nq-next-widget > div { min-height: 54px; margin-top: 10px; display: grid; grid-template-columns: 32px 3px minmax(0, 1fr); align-items: center; gap: 8px; border-top: 1px solid var(--line-soft); }
.nq-next-widget > div > time { color: var(--text-muted); font-size: 7px; }
.nq-next-widget > div > span { width: 3px; height: 28px; border-radius: 2px; background: var(--color-primary); }
.nq-next-widget p { min-width: 0; margin: 0; display: flex; flex-direction: column; }
.nq-next-widget p b { overflow: hidden; font-size: 9px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.nq-next-widget p small { color: var(--text-muted); font-size: 7px; }
.nq-messages-widget { grid-column: 11 / span 4; grid-row: 2 / span 2; background: var(--color-surface-1); }
.nq-messages-widget > div { min-height: 42px; display: flex; align-items: center; gap: 7px; border-top: 1px solid var(--line-soft); }
.nq-messages-widget > div > i { width: 24px; height: 24px; display: grid; place-items: center; flex: none; border-radius: var(--radius-md); color: white; background: #d27d69; font-style: normal; font-size: 6px; }
.nq-messages-widget > div:nth-of-type(2) > i { background: #718bc8; }
.nq-messages-widget p { min-width: 0; flex: 1; margin: 0; display: flex; flex-direction: column; }
.nq-messages-widget p b { font-size: 8px; font-weight: 500; }
.nq-messages-widget p small { overflow: hidden; color: var(--text-muted); font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.nq-messages-widget time { color: var(--text-muted); font-size: 6px; }
.nq-quick-message-widget { grid-column: 15 / span 2; grid-row: 2 / span 2; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: color-mix(in oklch, var(--color-primary) 7%, var(--color-surface)); }
.nq-quick-message-widget .svg-glyph { width: 22px; height: 22px; margin-bottom: 8px; color: var(--color-primary-ink); }
.nq-quick-message-widget b { font-size: 8px; font-weight: 600; }
.nq-quick-message-widget small { margin-top: 2px; color: var(--text-muted); font-size: 6px; }
.nq-week-widget { grid-column: 1 / span 4; grid-row: 4 / span 4; background: var(--color-surface-1); }
.nq-week-days { margin-block: 10px 6px; display: grid; grid-template-columns: repeat(5, 1fr); border-block: 1px solid var(--line-soft); }
.nq-week-days span { min-height: 44px; display: grid; place-items: center; align-content: center; gap: 2px; }
.nq-week-days small { color: var(--text-muted); font-size: 6px; }
.nq-week-days b { font-size: 8px; font-weight: 500; }
.nq-week-days span.is-today { color: var(--color-on-primary); border-radius: var(--radius-md); background: var(--color-primary); }
.nq-week-days span.is-today small { color: inherit; }
.nq-week-event { min-height: 35px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid var(--line-soft); }
.nq-week-event > i { width: 3px; height: 22px; border-radius: 2px; background: var(--color-primary); }
.nq-week-event p { margin: 0; display: flex; flex-direction: column; }
.nq-week-event p b { font-size: 8px; font-weight: 500; }
.nq-week-event p small { color: var(--text-muted); font-size: 6px; }
.nq-checklist-widget { grid-column: 11 / span 2; grid-row: 4 / span 2; background: var(--color-surface-1); }
.nq-checklist-widget p { margin: 8px 0 0; display: flex; align-items: center; gap: 6px; font-size: 7px; }
.nq-checklist-widget p > i { width: 12px; height: 12px; display: grid; place-items: center; flex: none; border: 1px solid var(--line-strong); border-radius: 3px; }
.nq-checklist-widget p > i.is-done { color: var(--color-on-primary); border-color: var(--color-primary); background: var(--color-primary); }
.nq-checklist-widget p > i .svg-glyph { width: 8px; height: 8px; }
.nq-links-widget { grid-column: 13 / span 4; grid-row: 4 / span 2; background: var(--color-surface-1); }
.nq-links-widget header button { width: 20px; height: 20px; padding: 0; display: grid; place-items: center; border: 0; border-radius: var(--radius-sm); background: transparent; }
.nq-links-widget header button .svg-glyph { width: 11px; height: 11px; }
.nq-links-widget > div { min-height: 42px; display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line-soft); }
.nq-links-widget > div > span { width: 24px; height: 24px; display: grid; place-items: center; flex: none; border-radius: var(--radius-md); background: var(--color-surface); }
.nq-links-widget > div > span img { width: 100%; height: 100%; border-radius: inherit; }
.nq-links-widget > div > span .svg-glyph { width: 12px; height: 12px; }
.nq-links-widget > div p { min-width: 0; flex: 1; margin: 0; display: flex; flex-direction: column; }
.nq-links-widget > div p b { font-size: 8px; font-weight: 500; }
.nq-links-widget > div p small { color: var(--text-muted); font-size: 6px; }
.nq-links-widget > div > .svg-glyph { width: 10px; height: 10px; color: var(--text-muted); }
.nq-load-widget { grid-column: 5 / span 4; grid-row: 6 / span 2; background: var(--color-surface-1); }
.nq-load-widget > div { height: 53px; margin-top: 6px; display: flex; align-items: end; gap: 7px; }
.nq-load-widget > div i { height: var(--h); flex: 1; border-radius: 3px 3px 0 0; background: var(--color-primary); opacity: .35; }
.nq-load-widget > div i:nth-child(4) { opacity: 1; }
.nq-load-widget footer { display: flex; justify-content: space-between; color: var(--text-muted); font-size: 6px; }
.nq-glance-widget { grid-column: 11 / span 4; grid-row: 6 / span 2; background: var(--color-surface-1); }
.nq-glance-widget > div { min-height: 27px; display: grid; grid-template-columns: 34px 3px minmax(0, 1fr); align-items: center; gap: 7px; border-top: 1px solid var(--line-soft); }
.nq-glance-widget > div time { color: var(--text-muted); font-size: 6px; }
.nq-glance-widget > div i { width: 3px; height: 18px; border-radius: 2px; background: var(--color-primary); }
.nq-glance-widget > div p { margin: 0; overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.nq-attention-widget { grid-column: 15 / span 2; grid-row: 6 / span 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: color-mix(in oklch, var(--color-highlight) 10%, var(--color-surface)); }
.nq-attention-widget .svg-glyph { width: 17px; height: 17px; color: #9c6047; }
.nq-attention-widget strong { margin-top: 2px; font-size: 18px; line-height: 1; }
.nq-attention-widget b { margin-top: 4px; font-size: 7px; font-weight: 600; }
.nq-attention-widget small { color: var(--text-muted); font-size: 6px; }

/* Production search: a boxless panel over the app's frosted full-screen overlay. */
.nq-real-search.search-demo { min-height: 245px; padding: 0; display: block; overflow: hidden; background: var(--color-surface); }
.nq-search-underlay { position: absolute; inset: 0; padding: 20px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; background: var(--color-surface-1); }
.nq-search-underlay i { border-radius: var(--radius-lg); background: var(--color-surface); }
.nq-search-frost { position: absolute; inset: 0; padding: 20px; display: grid; place-items: center; background: color-mix(in oklch, var(--color-surface) 80%, transparent); backdrop-filter: blur(12px); }
.nq-search-sheet { width: min(390px, 92%); display: flex; flex-direction: column; gap: 9px; }
.nq-real-search .search-demo-input { height: 42px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: color-mix(in oklch, var(--color-surface) 70%, transparent); box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-primary) 15%, transparent); }
.nq-real-search .search-demo-input > .svg-glyph { width: 15px; height: 15px; color: var(--text-muted); }
.nq-real-search .search-demo-input b { min-width: 0; flex: 1; font-size: 10px; font-weight: 400; }
.nq-real-search .search-demo-input button { width: 23px; height: 23px; padding: 0; display: grid; place-items: center; border: 0; border-radius: var(--radius-md); color: var(--text-muted); background: transparent; }
.nq-real-search .search-demo-input button .svg-glyph { width: 11px; height: 11px; }
.nq-search-filters { display: flex; gap: 4px; overflow: hidden; }
.nq-search-filters button { height: 27px; padding: 0 8px; display: inline-flex; align-items: center; gap: 4px; flex: none; border: 0; border-radius: var(--radius-md); color: var(--text-secondary); background: transparent; font: inherit; font-size: 7px; }
.nq-search-filters button.is-active { color: var(--color-primary-ink); background: color-mix(in oklch, var(--color-primary) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-primary) 14%, transparent); }
.nq-search-filters img { width: 15px; height: 15px; border-radius: 4px; }
.nq-search-list { display: flex; flex-direction: column; gap: 3px; }
.nq-real-search .search-demo-row { min-height: 39px; padding: 5px 8px; border: 0; border-radius: var(--radius-lg); }
.nq-real-search .search-demo-row.is-selected { background: color-mix(in oklch, var(--color-on-surface) 8%, transparent); }
.nq-real-search .demo-icon { width: 28px; height: 28px; border-radius: var(--radius-md); background: color-mix(in oklch, var(--color-primary) 12%, transparent); }
.nq-real-search .search-demo-row p { font-size: 8px; }
.nq-real-search .search-demo-row p b { font-weight: 500; }
.nq-real-search .search-demo-row p small { color: var(--text-muted); font-size: 6px; }
.nq-real-search .search-demo-row em { padding: 2px 5px; border-radius: var(--radius-sm); color: var(--text-muted); background: color-mix(in oklch, var(--color-on-surface) 7%, transparent); font-size: 6px; font-style: normal; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }

/* Production Docs shell: app rail, shared PageHeader, tab strip, floating toolbar. */
.nq-real-doc.nq-doc-preview.collab-demo { left: 48px; right: 48px; width: auto; height: 360px; padding: 0; display: grid; grid-template-columns: 38px minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line-soft); border-bottom: 0; border-radius: 17px 17px 0 0; background: var(--color-surface-1); transform: none; }
.nq-real-doc-rail { padding: 8px 5px; display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--color-surface-1); }
.nq-real-doc-rail > span,
.nq-real-doc-rail > i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--radius-md); font-style: normal; }
.nq-real-doc-rail > span { color: var(--color-primary-ink); background: var(--color-surface); font-size: 6px; }
.nq-real-doc-rail > i { color: var(--text-muted); }
.nq-real-doc-rail > i img { width: 20px; height: 20px; border-radius: 5px; }
.nq-real-doc-rail .svg-glyph { width: 12px; height: 12px; }
.nq-real-doc-main { min-width: 0; display: flex; flex-direction: column; background: var(--color-surface-1); }
.nq-real-doc-header { height: 50px; padding: 0 10px; display: flex; align-items: center; gap: 6px; border: 0; background: var(--color-surface); }
.nq-real-doc-header > button { width: 25px; height: 25px; padding: 0; display: grid; place-items: center; flex: none; border: 0; border-radius: var(--radius-md); color: var(--text-muted); background: transparent; }
.nq-real-doc-header > button .svg-glyph { width: 11px; height: 11px; }
.nq-real-doc-header > img { width: 24px; height: 24px; border-radius: 6px; }
.nq-real-doc-header > b { min-width: 0; flex: 1; overflow: hidden; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.nq-real-doc-header > span { display: flex; }
.nq-real-doc-header > span i { width: 22px; height: 22px; margin-inline-start: -4px; display: grid; place-items: center; border: 2px solid var(--color-surface); border-radius: var(--radius-md); background: color-mix(in oklch, #d27d69 28%, var(--color-surface)); font-style: normal; font-size: 6px; }
.nq-real-doc-header > span i:last-child { background: color-mix(in oklch, #718bc8 28%, var(--color-surface)); }
.nq-real-doc-ribbon { padding: 0 8px 7px; background: var(--color-surface); }
.nq-real-doc-ribbon nav { height: 30px; display: flex; align-items: center; gap: 2px; }
.nq-real-doc-ribbon nav button { align-items: center; height: 23px; padding: 0 7px; border: 0; border-radius: var(--radius-md); color: var(--text-secondary); background: transparent; font: inherit; font-size: 7px; }
.nq-real-doc-ribbon nav button.is-active { color: var(--color-primary-ink); background: color-mix(in oklch, var(--color-primary) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-primary) 14%, transparent); }
.nq-real-doc-ribbon > div { min-height: 34px; padding: 4px 5px; display: flex; align-items: center; gap: 3px; overflow: hidden; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--color-surface-1); box-shadow: var(--shadow-sm); }
.nq-real-doc-ribbon > div button { width: 23px; height: 23px; padding: 0; display: grid; place-items: center; flex: none; border: 0; border-radius: var(--radius-md); color: var(--text-secondary); background: transparent; }
.nq-real-doc-ribbon > div button .svg-glyph { width: 10px; height: 10px; }
.nq-real-doc-ribbon > div > span { min-width: 25px; height: 23px; display: grid; place-items: center; border: 1px solid var(--line-soft); border-radius: var(--radius-md); color: var(--text-secondary); font-size: 7px; }
.nq-real-doc-ribbon > div .nq-toolbar-select {
  width: 62px;
  height: 23px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  flex: none;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  background: var(--color-surface);
  font: inherit;
  font-size: 6px;
  line-height: 1;
  text-align: start;
  white-space: nowrap;
}
.nq-real-doc-ribbon > div .nq-toolbar-select.nq-toolbar-font { width: 56px; }
.nq-real-doc-ribbon > div .nq-toolbar-select > span { min-width: 0; width: auto; height: auto; display: block; overflow: hidden; border: 0; border-radius: 0; color: inherit; font-size: inherit; text-overflow: ellipsis; white-space: nowrap; }
.nq-real-doc-ribbon > div .nq-toolbar-select .svg-glyph { width: 10px; height: 10px; flex: none; }
.nq-real-doc-desk { min-height: 0; flex: 1; overflow: hidden; background: var(--color-surface-1); }
.nq-real-doc .nq-doc-page { width: 73%; min-height: 240px; margin: 12px auto 0; padding: 24px 26px; border: 1px solid var(--line-soft); background: var(--color-surface); box-shadow: var(--shadow-sm); }

@media (max-width: 820px) {
  .nq-real-grid { grid-template-rows: repeat(7, 60px); }
  .nq-real-doc.nq-doc-preview.collab-demo { left: 34px; right: 34px; width: auto; }
}

@media (max-width: 560px) {
  .nq-shell-preview { grid-template-columns: 48px minmax(0, 1fr); }
  .nq-app-rail { padding: 10px 6px; gap: 8px; }
  .nq-dashboard-preview.nq-real-dashboard { padding: 12px 10px; overflow: hidden; }
  .nq-real-grid { width: 520px; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(7, 62px); transform: scale(.58); transform-origin: top left; }
  [dir="rtl"] .nq-real-grid { transform-origin: top right; }
  .nq-grid-separator { display: none; }
  .nq-clock-widget { grid-column: 1 / span 2; grid-row: 1 / span 2; }
  .nq-date-widget { grid-column: 3 / span 4; grid-row: 1 / span 2; }
  .nq-week-widget { grid-column: 1 / span 4; grid-row: 3 / span 4; }
  .nq-next-widget { grid-column: 5 / span 2; grid-row: 3 / span 2; }
  .nq-messages-widget,
  .nq-quick-message-widget,
  .nq-checklist-widget,
  .nq-links-widget,
  .nq-load-widget,
  .nq-glance-widget,
  .nq-attention-widget { display: none; }
  .nq-real-search.search-demo { left: 16px; right: 16px; }
  .nq-search-frost { padding: 12px; }
  .nq-search-sheet { width: 100%; }
  .nq-search-filters button:nth-child(n+4) { display: none; }
  .nq-real-doc.nq-doc-preview.collab-demo { left: 4%; right: 4%; width: auto; grid-template-columns: 34px minmax(0, 1fr); }
  .nq-real-doc-rail { padding-inline: 3px; }
  .nq-real-doc-ribbon nav button:nth-child(n+4) { display: none; }
  .nq-real-doc-ribbon .nq-toolbar-font { display: none; }
}

/* The legacy window sketch targeted every span in a project window. Reset that
   inherited placeholder treatment before applying the production Projects rows. */
.nq-desktop-projects .nq-projects-page > header > span,
.nq-desktop-projects .nq-projects-page > .nq-project-filters > span,
.nq-desktop-projects .nq-projects-page > .nq-project-filters > button > span,
.nq-desktop-projects .nq-projects-page > .nq-project-list article > span {
  height: auto;
  flex: initial;
  border-radius: 0;
  background: transparent;
}

/* Keep the docs canvas below the feature copy.  The production canvas itself
   can extend beyond its tile, but it must not cover the headline. */
.nq-real-doc.nq-doc-preview.collab-demo {
  height: 320px;
  bottom: -18px;
}

/* The app's document toolbar uses compact, inset controls rather than generic
   landing-page buttons.  These mirror the production doc-toolbar/cal-seg
   treatments at the preview scale. */
.nq-real-doc-ribbon > div {
  gap: 2px;
  padding: 4px 5px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  border-color: color-mix(in oklch, var(--color-on-surface) 9%, transparent);
  border-radius: 12px;
  background: color-mix(in oklch, var(--color-on-surface) 4%, var(--color-surface));
  box-shadow: 0 1px 2px color-mix(in oklch, var(--color-on-surface) 10%, transparent), inset 0 1px 0 color-mix(in oklch, var(--color-surface) 72%, transparent);
}
.nq-real-doc-ribbon > div::-webkit-scrollbar { display: none; }
.nq-real-doc-ribbon > div button {
  border: 1px solid transparent;
  border-radius: 8px;
}
.nq-real-doc-ribbon > div > span,
.nq-real-doc-ribbon > div .nq-toolbar-select {
  border-color: color-mix(in oklch, var(--color-on-surface) 13%, transparent);
  border-radius: 8px;
  background: color-mix(in oklch, var(--color-on-surface) 2%, var(--color-surface));
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--color-surface) 72%, transparent);
}

/* Production Projects Segmented: a framed group with a tinted active value,
   never a white card inside the group. */
.nq-project-filters > span {
  gap: 3px;
  padding: 3px;
  border-color: color-mix(in oklch, var(--color-on-surface) 12%, transparent);
  background: transparent;
}
.nq-project-filters > span button {
  padding: 0 7px;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
}
.nq-project-filters > span button.is-active {
  color: var(--color-primary-ink);
  background: color-mix(in oklch, var(--color-primary) 15%, transparent);
  box-shadow: none;
}
.nq-project-filters > button {
  border-color: color-mix(in oklch, var(--color-on-surface) 13%, transparent);
  background: color-mix(in oklch, var(--color-on-surface) 2%, var(--color-surface));
  box-shadow: inset 0 1px 0 color-mix(in oklch, var(--color-surface) 72%, transparent);
}

/* Keep the page title and collaborator presence visible in narrow desktop
   windows by sacrificing only secondary header actions. */
.nq-desktop-doc-page > header { gap: 4px; padding-inline: 8px; }
.nq-desktop-doc-page > header > p { min-width: 72px; flex: 1 1 72px; }
.nq-desktop-doc-page > header > span { flex: none; }
.nq-desktop-doc-page > header > button:nth-of-type(4),
.nq-desktop-doc-page > header > button:nth-of-type(5) { display: none; }

@media (max-width: 820px) {
  .nq-real-doc.nq-doc-preview.collab-demo { bottom: -12px; }
  .nq-desktop-doc-page > header > span { display: flex; }
  .nq-desktop-doc-page > header > span i { width: 18px; height: 18px; font-size: 5px; }
}

/* Match the production editor depth: the navigation rail stays on the clean
   surface while the writing area sits one surface level below it. */
.nq-desktop-docs .nq-desktop-rail,
.nq-real-doc-rail {
  background: var(--color-surface) !important;
}
.nq-desktop-doc-page,
.nq-real-doc-main,
.nq-desktop-doc-desk,
.nq-real-doc-desk {
  background: var(--color-surface-1);
}

/* Both document renderings share the same compact page-header proportions. */
.nq-desktop-doc-page > header,
.nq-real-doc-header {
  height: 48px;
  padding-inline: 8px;
  gap: 4px;
}
.nq-desktop-doc-page > header > img,
.nq-real-doc-header > img { width: 24px; height: 24px; border-radius: 6px; }
.nq-desktop-doc-page > header > p,
.nq-real-doc-header > b { min-width: 72px; flex: 1 1 72px; }
.nq-desktop-doc-page > header > span,
.nq-real-doc-header > span { flex: none; }

/* This is now the only Docs preview. Its rail is deliberately quieter and
   smaller than the rest of the editor chrome. */
.collab-demo .nq-real-doc-rail { padding: 7px 4px; gap: 4px; }
.collab-demo .nq-real-doc-rail > span,
.collab-demo .nq-real-doc-rail > i { width: 22px; height: 22px; }
.collab-demo .nq-real-doc-rail > span { font-size: 5px; }
.collab-demo .nq-real-doc-rail > i img { width: 15px; height: 15px; border-radius: 4px; }
.collab-demo .nq-real-doc-rail .svg-glyph { width: 10px; height: 10px; }

/* Nusuq Sheets desktop preview: PageHeader, ribbon, formula bar and grid. */
.nq-desktop-sheets .window-content { display: block; }
.nq-sheet-preview { height: 100%; display: grid; grid-template-columns: 38px minmax(0, 1fr); overflow: hidden; background: var(--color-surface); }
.nq-sheet-rail { padding: 7px 4px; display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: var(--color-surface); }
.nq-sheet-rail > span,
.nq-sheet-rail > i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: var(--radius-md); font-style: normal; }
.nq-sheet-rail > span { color: var(--color-primary-ink); background: var(--color-surface-1); font-size: 5px; }
.nq-sheet-rail img { width: 15px; height: 15px; border-radius: 4px; }
.nq-sheet-rail .svg-glyph { width: 10px; height: 10px; color: var(--text-muted); }
.nq-sheet-main { min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--color-surface); }
.nq-sheet-header.nq-real-doc-header > img { content: url("/assets/app-glyphs/sheets.png"); }
.nq-sheet-ribbon.nq-real-doc-ribbon { flex: none; }
.nq-sheet-formula { height: 27px; display: grid; grid-template-columns: 42px 24px minmax(0, 1fr); direction: ltr; border-block: 1px solid var(--line-soft); background: var(--color-surface); }
.nq-sheet-formula span { display: flex; align-items: center; padding-inline: 7px; border-inline-end: 1px solid var(--line-soft); color: var(--text-secondary); font-size: 6px; }
.nq-sheet-formula b { display: grid; place-items: center; border-inline-end: 1px solid var(--line-soft); color: var(--text-muted); font: italic 8px Georgia, serif; }
.nq-sheet-formula code { min-width: 0; padding: 7px; overflow: hidden; color: var(--text-secondary); font: 6px/1 ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
.nq-sheet-grid { min-height: 0; flex: 1; overflow: hidden; background: var(--color-surface); }
.nq-sheet-grid table { width: 100%; border-collapse: collapse; table-layout: fixed; direction: ltr; font-size: 6px; }
.nq-sheet-grid th,
.nq-sheet-grid td { height: 24px; padding: 0 6px; overflow: hidden; border-inline-end: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); text-align: start; text-overflow: ellipsis; white-space: nowrap; }
.nq-sheet-grid thead th,
.nq-sheet-grid tbody th { color: var(--text-muted); background: var(--color-surface-1); font-weight: 500; text-align: center; }
.nq-sheet-grid thead th:first-child,
.nq-sheet-grid tbody th { width: 24px; padding: 0; }
.nq-sheet-grid td.is-head { color: var(--color-primary-ink); background: color-mix(in oklch, var(--color-primary) 14%, transparent); font-weight: 600; }
.nq-sheet-grid td.is-selected { position: relative; background: color-mix(in oklch, var(--color-primary) 8%, transparent); box-shadow: inset 0 0 0 1px var(--color-primary); }
.nq-sheet-grid td.is-total { font-weight: 600; background: var(--color-surface-1); }
.nq-sheet-status { height: 25px; padding-inline: 8px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line-soft); color: var(--text-muted); background: var(--color-surface); font-size: 6px; }
.nq-sheet-status b { padding: 3px 7px; border-radius: var(--radius-sm); color: var(--color-primary-ink); background: color-mix(in oklch, var(--color-primary) 14%, transparent); font-weight: 500; }

/* Exact scaled equivalent of the shared cal-seg: 8px track, 4px chips.
   The fully-scoped selectors deliberately override the legacy placeholder
   reset used by the desktop-art window. */
.nq-desktop-projects .nq-projects-page > .nq-project-filters > span { border-radius: 8px; }
.nq-desktop-projects .nq-projects-page > .nq-project-filters > span button { border-radius: 4px; }
.nq-projects-page > header > button,
.nq-projects-page > header > button i {
  flex-wrap: nowrap;
  white-space: nowrap;
}
.nq-projects-page > header > button i { display: inline; line-height: 1; }

/* Homepage product views use one desktop composition at every viewport. The
   canvas is resized as a unit by script.js, so labels, rails and controls keep
   the same geometry instead of switching to a different narrow layout. */
.nq-fluid-view,
.nq-scaled-canvas {
  --view-scale: 1;
  width: calc(var(--view-width) * 1px) !important;
  height: calc(var(--view-height) * 1px) !important;
  transform: translateX(-50%) scale(var(--view-scale)) !important;
  transform-origin: top center !important;
}
.nq-fluid-view {
  left: 50% !important;
  right: auto !important;
}
.nq-fluid-stage-view { position: absolute; inset-block-start: 0; min-height: 0; }
/* The stage view is drawn at its design size and scaled with a transform, so
   its 18px corners scale with it; the frame's radius follows the same scale. */
.product-stage { --stage-radius: 18px; border-radius: calc(var(--stage-radius) * var(--view-scale, 1)); }
.nq-fluid-stage-view { overflow: hidden; border-radius: var(--stage-radius); }
.nq-fluid-search-view,
.nq-fluid-reference-view,
.nq-fluid-doc-view {
  top: auto !important;
  bottom: 24px !important;
  transform-origin: bottom center !important;
}
.nq-fluid-search-view,
.nq-fluid-doc-view {
  border-bottom: 1px solid var(--line-soft) !important;
  border-radius: 17px !important;
}
.nq-scaled-frame { position: relative; min-height: 0 !important; overflow: hidden; }
.desktop-art.nq-scaled-frame { overflow: visible; }
.nq-scaled-canvas { position: absolute; top: 0; left: 50%; }
.nq-scaled-desktop,
.nq-scaled-flow { overflow: visible; }
.nq-scaled-flow {
  overflow: hidden;
  border-radius: inherit;
  background-color: color-mix(in oklch, var(--color-on-surface) 2%, var(--color-surface));
  background-image: radial-gradient(color-mix(in oklch, var(--color-on-surface) 14%, transparent) .7px, transparent .7px);
  background-size: 16px 16px;
}

/* Keep the Projects title and action intact inside the scaled back window. */
.nq-projects-page > header { gap: 8px; overflow: hidden; }
.nq-projects-page > header > span { min-width: 0; flex: 1; overflow: hidden; }
.nq-projects-page > header > span b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nq-projects-page > header > button {
  width: auto !important;
  height: 28px !important;
  padding: 0 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  min-width: max-content;
  flex: none;
  flex-wrap: nowrap;
  overflow: hidden;
  white-space: nowrap;
}
.nq-projects-page > header > button i { display: block !important; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Undo viewport media-query substitutions inside the fixed-size stage. */
.nq-fluid-stage-view { grid-template-columns: 60px minmax(0, 1fr) !important; }
.nq-fluid-stage-view .nq-app-rail { padding: 16px 12px !important; gap: 12px !important; }
.nq-fluid-stage-view .nq-rail-avatar,
.nq-fluid-stage-view .nq-app-rail button { width: 36px !important; height: 36px !important; }
.nq-fluid-stage-view .nq-dashboard-preview.nq-real-dashboard { padding: 20px !important; overflow: hidden; }
.nq-fluid-stage-view .nq-real-grid {
  width: auto !important;
  grid-template-columns: repeat(16, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(7, 62px) !important;
  transform: none !important;
}
.nq-fluid-stage-view .nq-grid-separator { display: flex !important; grid-column: 1 / -1; grid-row: 1; }
.nq-fluid-stage-view .nq-clock-widget { display: grid !important; grid-column: 1 / span 2; grid-row: 2 / span 2; }
.nq-fluid-stage-view .nq-date-widget { display: flex !important; grid-column: 3 / span 2; grid-row: 2 / span 2; }
.nq-fluid-stage-view .nq-next-widget { display: block !important; grid-column: 5 / span 4; grid-row: 2 / span 4; }
.nq-fluid-stage-view .nq-week-widget { display: block !important; grid-column: 1 / span 4; grid-row: 4 / span 4; }
.nq-fluid-stage-view :is(.nq-messages-widget,.nq-checklist-widget,.nq-links-widget,.nq-load-widget,.nq-glance-widget) { display: block !important; }
.nq-fluid-stage-view :is(.nq-quick-message-widget,.nq-attention-widget) { display: flex !important; }

.nq-fluid-search-view { min-height: 245px !important; }
.nq-fluid-search-view .nq-search-frost { padding: 20px !important; }
.nq-fluid-search-view .nq-search-sheet { width: min(390px, 92%) !important; }
.nq-fluid-search-view .nq-search-filters button { display: inline-flex !important; }

.nq-fluid-doc-view {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
}
.nq-fluid-doc-view .nq-sheet-rail { padding: 7px 4px !important; gap: 4px !important; }
.nq-fluid-doc-view .nq-real-doc-ribbon nav button { display: inline-flex !important; }
.nq-fluid-doc-view .nq-toolbar-font { display: inline-flex !important; }

/* Preserve the exact desktop window composition inside its scaled canvas. */
.nq-scaled-desktop .desktop-window-back { width: 72% !important; height: 340px !important; right: -5% !important; top: 5% !important; }
.nq-scaled-desktop .desktop-window-front { width: 82% !important; height: 420px !important; left: 0 !important; bottom: 0 !important; }
.nq-scaled-desktop .badge-open { left: -22px !important; top: 82px !important; }
.nq-scaled-desktop .badge-sync { right: 0 !important; bottom: 32px !important; }
.nq-scaled-desktop .nq-mini-rail { width: 42px !important; padding: 8px 6px !important; gap: 7px !important; }
.nq-scaled-desktop .nq-mini-rail > i,
.nq-scaled-desktop .nq-mini-rail > span { width: 28px !important; height: 28px !important; }
.nq-scaled-desktop .nq-projects-page > nav button,
.nq-scaled-desktop .nq-desktop-doc-page > .nq-real-doc-ribbon nav button,
.nq-scaled-desktop .nq-desktop-doc-page > header > span,
.nq-scaled-desktop .nq-real-doc-ribbon .nq-toolbar-font { display: flex !important; }
.nq-scaled-desktop .nq-project-list article { grid-template-columns: minmax(0, 1fr) 100px !important; }
.nq-scaled-desktop .nq-desktop-docs .nq-desktop-doc-desk > main,
.nq-scaled-desktop .nq-desktop-doc-desk > main { width: 70% !important; min-height: 300px !important; padding: 28px 32px !important; }

/* Flow keeps the same node map and only changes its overall scale. */
.nq-scaled-flow .node-trigger { left: 40px !important; top: 120px !important; }
.nq-scaled-flow .node-check { left: 265px !important; right: auto !important; top: 250px !important; }
.nq-scaled-flow .node-approve { left: auto !important; right: 40px !important; top: 120px !important; }
.nq-scaled-flow .node-task { right: 65px !important; bottom: 55px !important; }
.nq-scaled-flow .flow-lines { opacity: 1 !important; }

@media (max-width: 820px) {
  .desktop-section { min-height: 0 !important; }
}

/* ── Marketplace (assets/marketplace.js) ─────────────────────────────────── */
.button-danger { color: #fff; border-color: var(--color-danger); background: var(--color-danger); }
.button-danger:hover { background: color-mix(in srgb, var(--color-danger) 86%, #000); }
.mk-toolbar { margin-bottom: var(--space-4); display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.mk-toolbar .segmented small { margin-inline-start: .25rem; color: inherit; opacity: .7; font-size: .75rem; }
.mk-search { min-width: 220px; flex: 1 1 260px; position: relative; display: flex; align-items: center; }
.mk-search .svg-glyph { position: absolute; inset-inline-start: .75rem; width: 1rem; height: 1rem; color: var(--text-muted); pointer-events: none; }
.mk-search input { width: 100%; min-height: 40px; padding: 0 .75rem; padding-inline-start: 2.25rem; border: 1px solid var(--line-soft); border-radius: var(--radius-md); color: var(--text-primary); background: var(--color-surface); font: inherit; font-size: .875rem; }
.mk-search input:focus { border-color: var(--color-primary); outline: none; box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-primary) 18%, transparent); }
.mk-filter { min-width: 180px; margin: 0; }
.mk-count { margin: 0 0 var(--space-3); color: var(--text-muted); font-size: .8125rem; }
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }
.mk-card { min-width: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--color-surface); transition: border-color 120ms ease, box-shadow 120ms ease; }
.mk-card:hover { border-color: color-mix(in oklch, var(--color-primary) 40%, var(--line-soft)); box-shadow: var(--shadow-md); }
.mk-preview { position: relative; height: 210px; padding: 1rem; overflow: hidden; display: grid; place-items: center; border-bottom: 1px solid var(--line-soft); background: color-mix(in oklch, var(--color-on-surface) 2.5%, var(--color-surface)); }
.mk-preview::before { content: ""; position: absolute; inset: 1rem; border-radius: var(--radius-md); background: linear-gradient(100deg, transparent 30%, color-mix(in oklch, var(--color-on-surface) 6%, transparent) 50%, transparent 70%) 0 0 / 200% 100%; opacity: 0; }
.mk-preview:not(.is-ready):not(.is-failed)::before { opacity: 1; animation: mkShimmer 1.4s linear infinite; }
.mk-preview.is-failed { color: var(--text-muted); font-size: .8125rem; }
.mk-preview > nusuq-widget { border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
@keyframes mkShimmer { to { background-position: -200% 0; } }
.mk-card-body { flex: 1; padding: 1rem 1.125rem 1.125rem; display: flex; flex-direction: column; gap: .5rem; }
.mk-card-body h3 { margin: 0; font-size: 1.0625rem; font-weight: 600; }
.mk-card-body > p { margin: 0; color: var(--text-secondary); font-size: .875rem; line-height: 1.55; }
.mk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .625rem; color: var(--text-muted); font-size: .75rem; }
.mk-meta a { color: var(--color-primary-ink); }
.mk-meta a:hover { text-decoration: underline; }
.mk-pill { padding: .125rem .5rem; border-radius: var(--radius-full); color: var(--color-primary-ink); background: color-mix(in oklch, var(--color-primary) 12%, var(--color-surface)); font-size: .6875rem; font-weight: 600; }
.mk-sizes { display: flex; flex-direction: column; gap: .375rem; }
.mk-sizes:empty { display: none; }
.mk-sizes .segmented { width: 100%; display: flex; }
.mk-sizes .segmented button { min-width: 0; flex: 1 1 0; padding: .3rem .5rem; font-size: .75rem; font-variant-numeric: tabular-nums; }
.mk-card-foot { margin-top: auto; padding-top: .5rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.mk-report { width: 40px; height: 40px; margin-inline-start: auto; flex: none; display: inline-grid; place-items: center; border: 1px solid transparent; border-radius: var(--radius-md); color: var(--text-muted); background: transparent; cursor: pointer; transition: color 120ms ease, border-color 120ms ease, background 120ms ease; }
.mk-report:hover, .mk-report:focus-visible { color: var(--color-danger); border-color: var(--line-soft); background: var(--color-surface); }
.mk-report .svg-glyph { width: 1rem; height: 1rem; }
.mk-notice { margin: 0; padding: .5rem .625rem; border-radius: var(--radius-md); color: var(--text-secondary); background: color-mix(in oklch, var(--color-warning) 14%, var(--color-surface)); font-size: .8125rem; }
.mk-template-cover { position: relative; height: 210px; padding: 1.25rem; display: flex; flex-direction: column; justify-content: flex-end; gap: .25rem; border: 0; border-bottom: 1px solid var(--line-soft); color: var(--text-primary); background: radial-gradient(circle at 85% 15%, color-mix(in oklch, var(--hero-accent, var(--color-primary)) 30%, transparent), transparent 55%), color-mix(in oklch, var(--color-primary) 6%, var(--color-surface)); font: inherit; text-align: start; }
.mk-template-cover strong { font-size: 1.5rem; font-weight: 600; }
.mk-template-cover span { color: var(--text-secondary); font-size: .8125rem; line-height: 1.5; }
.mk-template-cover small { color: var(--text-muted); font-size: .75rem; }
.mk-template-cover em { position: absolute; top: 1rem; inset-inline-end: 1rem; padding: .25rem .625rem; display: inline-flex; align-items: center; gap: .375rem; border: 1px solid var(--line-soft); border-radius: var(--radius-full); color: var(--text-secondary); background: var(--color-surface); font-size: .75rem; font-style: normal; opacity: 0; transition: opacity 120ms ease; }
.mk-template-cover:hover em, .mk-template-cover:focus-visible em { opacity: 1; }
.mk-template-cover em .svg-glyph { width: .875rem; height: .875rem; }
.mk-empty { padding: var(--space-6); display: grid; justify-items: center; gap: .5rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); color: var(--text-secondary); text-align: center; grid-column: 1 / -1; }
.mk-empty span { color: var(--text-muted); font-size: .875rem; }
.mk-pagination { margin-top: var(--space-5); display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem; }
.mk-pagination button { min-width: 36px; height: 36px; padding: 0 .5rem; display: inline-grid; place-items: center; border: 1px solid var(--line-soft); border-radius: var(--radius-md); color: var(--text-secondary); background: var(--color-surface); font: inherit; font-size: .875rem; }
.mk-pagination button.active { color: var(--color-on-primary); border-color: var(--color-primary); background: var(--color-primary); }
.mk-pagination .svg-glyph { width: .875rem; height: .875rem; }
.mk-author-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-3); }
.mk-author-card { padding: 1rem 1.125rem; display: flex; align-items: center; gap: .875rem; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--color-surface); transition: border-color 120ms ease, transform 120ms ease; }
.mk-author-card:hover { border-color: var(--color-primary); transform: translateY(-1px); }
.mk-author-card > .svg-glyph { margin-inline-start: auto; width: 1rem; height: 1rem; color: var(--text-muted); }
.mk-author-copy { min-width: 0; display: flex; flex-direction: column; gap: .125rem; }
.mk-author-copy small { overflow: hidden; color: var(--text-muted); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.mk-avatar { width: 44px; height: 44px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 14px; color: var(--color-primary-ink); background: color-mix(in oklch, var(--color-primary) 14%, var(--color-surface)); font-weight: 600; }
.mk-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mk-avatar-lg { width: 72px; height: 72px; border-radius: 22px; font-size: 1.5rem; }
.market-author-hero { min-height: 0; }
.mk-author-head { display: grid; gap: var(--space-4); }
.mk-author-title { display: flex; align-items: center; gap: var(--space-4); }
.mk-author-title h1 { margin: 0; }
.mk-author-title .page-kicker { margin: 0 0 .375rem; }
.mk-author-head .page-lead { max-width: 720px; margin: 0; }
.mk-author-head .page-hero-actions { margin: 0; }
.mk-author-head .button .svg-glyph { width: 1rem; height: 1rem; }
.mk-author-stats { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.mk-author-stats div { display: flex; flex-direction: column; gap: .125rem; }
.mk-author-stats dt { color: var(--text-muted); font-size: .75rem; }
.mk-author-stats dd { margin: 0; font-size: 1.125rem; font-weight: 600; }
.mk-author-stats code { font-size: .875rem; }
.nq-overlay { position: fixed; inset: 0; z-index: 140; padding: 1.5rem; display: grid; place-items: center; overflow-y: auto; background: color-mix(in oklch, var(--color-on-surface) 36%, transparent); animation: mkFade 160ms ease; }
.nq-overlay.is-closing { opacity: 0; transition: opacity 150ms ease; }
html.nq-modal-open { overflow: hidden; }
@keyframes mkFade { from { opacity: 0; } }
.nq-dialog { width: min(440px, 100%); padding: 1.5rem; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-lg); animation: mkRise 180ms cubic-bezier(.2,.8,.2,1); }
@keyframes mkRise { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.nq-dialog h2 { margin: 0 0 .5rem; font-size: 1.25rem; font-weight: 600; }
.nq-dialog p { margin: 0; color: var(--text-secondary); line-height: 1.6; }
.nq-dialog .form-actions { margin-top: var(--space-5); display: flex; justify-content: flex-end; gap: .5rem; }
.mk-template-dialog { width: min(1180px, 100%); display: grid; gap: var(--space-4); }
.mk-template-dialog header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.mk-template-dialog header .page-kicker { margin: 0 0 .25rem; }
.mk-template-dialog .dialog-close { position: static; flex: none; }
.mk-page-tabs { max-width: 100%; overflow-x: auto; }
.mk-page-tabs button { white-space: nowrap; }
.mk-template-canvas { min-height: 200px; padding: 1rem; overflow: hidden; border-radius: var(--radius-md); background: color-mix(in oklch, var(--color-on-surface) 3%, var(--color-surface)); }
.mk-page-frame { position: relative; overflow: hidden; }
.mk-page-canvas { position: absolute; top: 0; inset-inline-start: 0; }
.mk-page-missing { position: absolute; display: grid; place-items: center; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); color: var(--text-muted); font-size: 12px; }
.mk-template-status { margin: 0; color: var(--text-muted); font-size: .8125rem; }
.mk-template-status:empty { display: none; }
.mk-report-dialog { display: grid; gap: var(--space-3); }
.mk-report-dialog h2, .mk-report-dialog .form-actions { margin: 0; }
.mk-report-dialog .field { display: grid; gap: .375rem; }
.mk-report-dialog textarea { min-height: 4.75rem; }
.mk-report-dialog .workflow-status { margin: 0; }
.mk-report-dialog .workflow-status:not(.show) { display: none; }
.mk-agreement { max-width: 860px; margin-inline: auto; display: grid; gap: var(--space-5); }
.mk-agreement .prose-legal h2 { margin: var(--space-5) 0 .5rem; font-size: 1.125rem; }
.mk-agreement .prose-legal p { color: var(--text-secondary); line-height: 1.75; }
.mk-agreement-version { color: var(--text-muted) !important; font-size: .8125rem; }
.mk-agreement-accept { position: sticky; bottom: 1rem; padding: 1rem 1.25rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: color-mix(in oklch, var(--color-surface) 94%, transparent); backdrop-filter: blur(12px); box-shadow: var(--shadow-md); }
.mk-agreement-accept .form-actions { margin: 0; }
.mk-agreement-accept .workflow-status { flex-basis: 100%; margin: 0; }
.mk-stats { margin-bottom: var(--space-5); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.mk-stats article { padding: 1rem 1.125rem; display: flex; flex-direction: column; gap: .25rem; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--color-surface); }
.mk-stats strong { font-size: 1.75rem; font-weight: 600; line-height: 1; }
.mk-stats span { color: var(--text-muted); font-size: .8125rem; }
.mk-dash-tabs { margin-bottom: var(--space-4); }
.mk-dash-panel { display: grid; gap: var(--space-4); }
.mk-panel-card { padding: clamp(1.125rem, 2.5vw, 1.75rem); display: grid; gap: var(--space-4); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--color-surface); }
.mk-panel-card > h3, .mk-panel-head h3 { margin: 0; font-size: 1.125rem; font-weight: 600; }
.mk-panel-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .75rem 1rem; }
.mk-panel-head p { max-width: 640px; margin: .25rem 0 0; color: var(--text-secondary); font-size: .875rem; line-height: 1.55; }
.mk-panel-head a { color: var(--color-primary-ink); text-decoration: underline; text-underline-offset: 2px; }
.mk-panel-card .form-grid, .mk-panel-card .form-actions, .mk-panel-card .workflow-status { margin: 0; }
.mk-panel-card .workflow-status:not(.show) { display: none; }
.mk-identifier { width: max-content; padding: .375rem .625rem; border-radius: var(--radius-sm); background: var(--color-surface-1); font-size: .9375rem; letter-spacing: .04em; }
.mk-hint { color: var(--text-muted); font-size: .75rem; }
.mk-counter { justify-self: end; font-variant-numeric: tabular-nums; }
.field textarea { width: 100%; }
.mk-drop { position: relative; padding: 1.5rem; display: grid; justify-items: center; gap: .25rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); color: var(--text-secondary); text-align: center; transition: border-color 120ms ease, background 120ms ease; }
.mk-drop:hover, .mk-drop:focus-within { border-color: var(--color-primary); background: color-mix(in oklch, var(--color-primary) 5%, transparent); }
.mk-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mk-drop .svg-glyph { width: 1.5rem; height: 1.5rem; color: var(--color-primary-ink); }
.mk-drop small { color: var(--text-muted); font-size: .75rem; }
.mk-queue { margin: 0; padding: 0; display: grid; gap: .5rem; list-style: none; }
.mk-queue li { padding: .625rem .75rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 32px; align-items: center; gap: .375rem .75rem; border: 1px solid var(--line-soft); border-radius: var(--radius-md); }
.mk-queue li.has-error { border-color: color-mix(in srgb, var(--color-danger) 50%, var(--line-soft)); }
.mk-queue li.is-available { border-color: color-mix(in srgb, var(--color-success) 60%, var(--line-soft)); }
.mk-queue li > div { min-width: 0; display: flex; flex-direction: column; }
.mk-queue li > div b { overflow: hidden; font-size: .875rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.mk-queue li > div small { color: var(--text-muted); font-size: .75rem; }
.mk-slug { min-width: 0; display: flex; align-items: center; overflow: hidden; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--color-surface); direction: ltr; }
.mk-slug span { padding: 0 .375rem 0 .5rem; color: var(--text-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; white-space: nowrap; }
.mk-slug input { min-width: 0; flex: 1; height: 32px; padding: 0 .5rem 0 0; border: 0; outline: none; background: transparent; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; }
.mk-slug-state { grid-column: 1 / -1; margin: 0; color: var(--text-muted); font-size: .75rem; }
.mk-queue li.has-error .mk-slug-state { color: #8d3434; }
.mk-queue li.is-available .mk-slug-state { color: #375821; }
.mk-icon-button { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border: 1px solid transparent; border-radius: var(--radius-md); color: var(--text-muted); background: transparent; }
.mk-icon-button:hover { color: var(--color-danger); border-color: var(--line-soft); }
.mk-icon-button .svg-glyph { width: .75rem; height: .75rem; }
.mk-integration-toggle { align-items: flex-start; }
.mk-integration-toggle span { display: flex; flex-direction: column; gap: .125rem; }
.mk-integration-toggle b { font-weight: 500; }
.mk-integration-toggle small { color: var(--text-muted); font-size: .8125rem; }
.mk-integration { padding: 1rem; display: grid; gap: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-1); }
.mk-integration[hidden] { display: none; }
.mk-variables { display: grid; gap: .5rem; }
.mk-variable { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 130px auto auto 32px; align-items: center; gap: .5rem; }
.mk-variable > input { min-width: 0; height: 36px; padding: 0 .625rem; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--color-surface); font: inherit; font-size: .8125rem; }
.mk-variable .field { margin: 0; }
.mk-variable .check-row { font-size: .8125rem; white-space: nowrap; }
.mk-rows { display: grid; }
.mk-row { padding: .875rem 0; display: flex; align-items: flex-start; gap: 1rem; border-top: 1px solid var(--line-soft); }
.mk-row:first-child { border-top: 0; padding-top: 0; }
.mk-row-preview { position: relative; width: 112px; height: 84px; flex: none; overflow: hidden; border-radius: var(--radius-md); background: color-mix(in oklch, var(--color-on-surface) 3%, var(--color-surface)); }
.mk-row-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: .25rem; }
.mk-row-main small { color: var(--text-muted); font-size: .8125rem; }
.mk-row-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.mk-row-head strong { font-weight: 600; }
.mk-review-note { margin: .25rem 0 0; color: var(--text-secondary); font-size: .875rem; line-height: 1.55; }
.mk-badge { padding: .125rem .5rem; border-radius: var(--radius-full); color: var(--text-secondary); background: var(--color-surface-2); font-size: .6875rem; font-weight: 600; }
.mk-badge.is-pending, .mk-badge.is-reviewing { color: #6b5212; background: color-mix(in oklch, var(--color-warning) 22%, var(--color-surface)); }
.mk-badge.is-changes_requested { color: #7a3f12; background: color-mix(in oklch, var(--palette-orange-300, #f4b36f) 30%, var(--color-surface)); }
.mk-badge.is-approved { color: #375821; background: color-mix(in oklch, var(--color-success) 22%, var(--color-surface)); }
.mk-badge.is-rejected { color: #8d3434; background: color-mix(in srgb, var(--color-danger) 16%, var(--color-surface)); }
.mk-template-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .5rem; }
.mk-template-choice { padding: .375rem .375rem .375rem .875rem; display: flex; align-items: center; gap: .5rem; border: 1px solid var(--line-soft); border-radius: var(--radius-md); transition: border-color 120ms ease, background 120ms ease; }
.mk-template-choice.is-selected { border-color: var(--color-primary); background: color-mix(in oklch, var(--color-primary) 7%, transparent); }
.mk-template-choice-main { min-width: 0; flex: 1; padding: .375rem 0; display: flex; flex-direction: column; gap: .125rem; border: 0; color: inherit; background: transparent; font: inherit; text-align: start; }
.mk-template-choice-main strong { overflow: hidden; font-size: .875rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.mk-template-choice-main small { color: var(--text-muted); font-size: .75rem; }
@media (max-width: 760px) {
  .mk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-queue li { grid-template-columns: minmax(0, 1fr) 32px; }
  .mk-queue li .mk-slug { grid-column: 1 / -1; grid-row: 2; }
  .mk-variable { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px; }
  .mk-variable .field { grid-column: 1 / -1; }
  .mk-row-preview { display: none; }
  .mk-author-title { align-items: flex-start; }
}

/* ── Date fields (nusuq-controls.js enhanceDate), the app's DatePicker ───── */
.nq-date { position: relative; width: 100%; }
.nq-native-date {
  position: absolute !important;
  inset: 0 auto auto 0;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.nq-date-button {
  width: 100%;
  min-height: 40px;
  padding: .5rem .625rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  background: color-mix(in oklch, var(--color-on-surface) 4%, transparent);
  font: inherit;
  font-size: .875rem;
  text-align: start;
  transition: border-color 120ms ease, background 120ms ease;
}
.nq-date-button:hover { border-color: color-mix(in oklch, var(--color-on-surface) 32%, transparent); }
.nq-date-button:focus-visible, .nq-date.is-open .nq-date-button { border-color: var(--color-primary); outline: none; }
.nq-date-button.is-placeholder .nq-date-value > span:last-child { color: var(--text-muted); }
.nq-date-button:disabled { cursor: not-allowed; opacity: .55; }
.nq-date.is-invalid .nq-date-button { border-color: var(--color-danger); }
.nq-date-value { min-width: 0; display: inline-flex; align-items: center; gap: .5rem; overflow: hidden; white-space: nowrap; }
.nq-date-value > span { overflow: hidden; text-overflow: ellipsis; }
.nq-date-icon { width: 1rem; height: 1rem; flex: none; color: var(--text-muted); }
.nq-date.is-open .nq-select-chevron { transform: rotate(180deg); }
.nq-date-pop {
  position: fixed;
  z-index: 130;
  width: min(296px, calc(100vw - 16px));
  padding: .75rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px) scale(.985);
  transform-origin: top center;
  transition: opacity 160ms ease, transform 160ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 160ms;
}
.nq-date.opens-up .nq-date-pop { transform-origin: bottom center; }
.nq-date.is-open .nq-date-pop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nq-date-head { margin-bottom: .5rem; display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px; align-items: center; gap: .375rem; }
.nq-date-period { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: .375rem; }
.nq-date-period .nq-select-button { min-height: 32px; padding: .25rem .5rem; font-size: .8125rem; font-weight: 500; }
.nq-date-period .nq-select-menu { max-height: 220px; }
.nq-date-nav { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border: 1px solid transparent; border-radius: var(--radius-md); color: var(--text-secondary); background: transparent; }
.nq-date-nav:hover { border-color: var(--line-soft); color: var(--text-primary); }
.nq-date-nav .svg-glyph { width: 1rem; height: 1rem; }
.nq-date-week, .nq-date-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.nq-date-week span { padding: .25rem 0; color: var(--text-muted); font-size: .6875rem; text-align: center; }
.nq-date-grid button { aspect-ratio: 1; padding: 0; display: grid; place-items: center; border: 1px solid transparent; border-radius: var(--radius-md); color: var(--text-primary); background: transparent; font: inherit; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.nq-date-grid button:hover:not(:disabled) { background: color-mix(in oklch, var(--color-primary) 10%, transparent); }
.nq-date-grid button:focus-visible { border-color: var(--color-primary); outline: none; }
.nq-date-grid button.is-outside { color: var(--text-muted); opacity: .6; }
.nq-date-grid button.is-today { border-color: color-mix(in oklch, var(--color-primary) 45%, transparent); font-weight: 600; }
.nq-date-grid button.is-selected { color: var(--color-on-primary); background: var(--color-primary); opacity: 1; }
.nq-date-grid button:disabled { color: var(--text-muted); opacity: .3; }
.nq-date-foot { margin-top: .5rem; padding-top: .5rem; display: flex; justify-content: flex-end; border-top: 1px solid var(--line-soft); }
.nq-date-clear { padding: .25rem .5rem; border: 0; border-radius: var(--radius-sm); color: var(--color-primary-ink); background: transparent; font: inherit; font-size: .8125rem; }
.nq-date-clear:hover { background: color-mix(in oklch, var(--color-primary) 10%, transparent); }

/* ── Account settings (product-workflows.js), after the app's settings ───── */
.set-muted { margin: 0; color: var(--text-muted); font-size: .8125rem; line-height: 1.6; }
.set-warn { margin: 0; color: #8a5a10; font-size: .8125rem; line-height: 1.6; }
.settings-card > .set-muted, .settings-card > .set-warn, .settings-card > p { margin-top: .5rem; }
.settings-card .form-actions { margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.settings-card .form-grid { margin-top: .5rem; }
.settings-card .field + .field, .settings-card .field + .ui-collapse { margin-top: .75rem; }
.set-card-head { margin-bottom: .5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.set-card-head h3 { margin: 0 !important; }
.set-badge { padding: .125rem .5rem; border-radius: var(--radius-full); font-size: .6875rem; font-weight: 600; white-space: nowrap; }
.set-badge.is-ok { color: #375821; background: color-mix(in oklch, var(--color-success) 22%, var(--color-surface)); }
.set-badge.is-warn { color: #6b5212; background: color-mix(in oklch, var(--color-warning) 24%, var(--color-surface)); }
.set-facts { margin: 0; display: grid; }
.set-facts > div { padding: .625rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line-soft); font-size: .875rem; }
.set-facts > div:first-child { border-top: 0; }
.set-facts dt { color: var(--text-muted); }
.set-facts dd { margin: 0; display: flex; align-items: center; gap: .5rem; font-weight: 500; text-align: end; }
.set-cycle-price { margin-top: .75rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.set-cycle-price strong { font-size: 1.5rem; font-weight: 600; }
.set-cycle-price small { margin-inline-start: .375rem; color: var(--text-muted); font-size: .8125rem; }
.set-link-out { margin-top: .75rem; display: inline-flex; align-items: center; gap: .375rem; color: var(--color-primary-ink); font-size: .8125rem; }
.set-link-out .svg-glyph { width: .875rem; height: .875rem; }
.set-link-out:hover { text-decoration: underline; }
.settings-list small { display: block; color: var(--text-muted); font-size: .75rem; font-weight: 400; }
/* sessions (Security tab): where the account is signed in + sign-in history */
.set-sessions-host { display: contents; }
.set-sessions { margin-top: .5rem; display: grid; }
.set-session { padding: .625rem 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; border-top: 1px solid var(--line-soft); font-size: .875rem; }
.set-session:first-child { border-top: 0; }
.set-session-icon { flex: none; color: var(--text-muted); }
.set-session-main { min-width: 0; display: grid; gap: .125rem; }
.set-session-main b, .set-session-last { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-weight: 500; }
.set-session-main small { color: var(--text-muted); font-size: .8125rem; overflow-wrap: anywhere; }
.set-session.is-ended .set-session-main b { color: var(--text-secondary); font-weight: 400; }
@media (max-width: 560px) {
  .set-session { grid-template-columns: auto minmax(0, 1fr); }
  .set-session > .button { grid-column: 2; justify-self: start; }
}
/* two-step verification (Security tab), after the app's settings two-factor block */
.set-tf-flow { margin: .75rem 0; padding: 1rem; display: grid; gap: .625rem; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); }
.set-tf-flow > .set-muted { margin: 0; }
/* Field-wide, so the eye button (nusuq-controls.js .password-wrap) sits inside it. */
.set-tf-flow > .password-wrap, .set-tf-flow > input[type="password"] { width: min(100%, 20rem); }
.set-tf-flow .password-wrap { position: relative; }
.set-tf-flow .password-wrap input { width: 100%; }
/* Room for the eye: the settings input rule below would otherwise take the padding back. */
:is(.set-row-control, .set-tf-flow) .password-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) { padding-inline-end: 2.75rem; }
.settings-card .set-tf-actions { margin-top: .25rem; justify-content: flex-end; }
.set-tf-scan { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
/* The same white frame as a public link's QR code in the app (36-canvas.css). */
.set-tf-qr { flex: none; min-width: 13.5rem; min-height: 13.5rem; padding: .75rem; display: grid; place-items: center; border: 1px solid color-mix(in oklch, var(--color-on-surface, #000) 10%, transparent); border-radius: var(--radius-lg); background: #fff; }
.set-tf-qr img { display: block; width: min(13.5rem, 60vw); aspect-ratio: 1; border-radius: var(--radius-sm); }
.set-tf-key { min-width: 12rem; flex: 1; display: grid; justify-items: start; gap: .5rem; font-size: .8125rem; }
.set-tf-key code, .set-tf-codes code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8125rem; letter-spacing: .04em; user-select: all; }
.set-tf-key code { padding: .375rem .5rem; border-radius: var(--radius-md); background: color-mix(in oklch, var(--text-primary) 5%, transparent); overflow-wrap: anywhere; }
.set-tf-code { display: grid; justify-items: start; gap: .375rem; }
.set-tf-code input { width: 10rem; letter-spacing: .3em; text-align: center; }
.set-tf-codes { margin: 0; padding: .75rem 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .375rem 1rem; list-style: decimal inside; border-radius: var(--radius-md); background: color-mix(in oklch, var(--text-primary) 4%, transparent); color: var(--text-muted); font-size: .75rem; }
.set-tf-codes code { color: var(--text-primary); }
.set-tf-low { color: #8a5a10; }
/* passkeys (Security tab): one row per passkey, its panel sliding open beneath it */
.set-passkey-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.set-session > .set-pk-slot { grid-column: 1 / -1; }
.set-session > .set-pk-slot .set-tf-flow { margin: .25rem 0 0; }
.set-tf-flow > input[name="name"] { width: min(100%, 20rem); }
@media (max-width: 560px) { .set-passkey-actions { grid-column: 2; justify-content: flex-start; } }
/* "or" between the password and a passkey (/signin/) */
.auth-or { margin: 18px 0 -4px; display: flex; align-items: center; gap: .75rem; color: var(--text-muted); font-size: 11px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }
.auth-or + .form-actions { margin-top: 18px; }
.set-tf-status { display: none; margin-top: .75rem; padding: 12px 14px; border-radius: var(--radius-md); color: var(--color-primary-ink); background: color-mix(in oklch, var(--color-primary) 12%, var(--color-surface)); font-size: 12px; line-height: 1.55; }
.set-tf-status.show { display: block; }
.set-tf-status.is-error { color: #8d3434; background: color-mix(in srgb, var(--color-danger) 12%, var(--color-surface)); }
.set-tf-status.is-success { color: #375821; background: color-mix(in oklch, var(--color-success) 18%, var(--color-surface)); }
.set-inline-form { margin-top: .75rem; display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; }
.set-inline-form .field { min-width: 0; flex: 0 1 160px; margin: 0; }
.set-inline-form input { letter-spacing: .3em; text-align: center; }
.metric-card.is-near .usage-bar i { background: var(--color-warning); }
/* the app's danger-outline button (22-sharedialog.css) */
.button-danger-outline { color: var(--color-danger); border-color: color-mix(in srgb, var(--color-danger) 40%, transparent); background: transparent; }
.button-danger-outline:hover:not(:disabled) { color: var(--color-danger); border-color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 12%, transparent); }
.set-danger-link { padding: 0; border: 0; color: var(--color-danger); background: transparent; font: inherit; font-size: .875rem; text-decoration: underline; text-underline-offset: 3px; }
.danger-card > p:not(.set-muted) { color: var(--text-secondary); font-size: .8125rem; line-height: 1.7; }
.set-team-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .5rem; }
.set-team-stats > div { padding: .75rem .875rem; display: flex; flex-direction: column; gap: .25rem; border: 1px solid var(--line-soft); border-radius: var(--radius-md); }
.set-team-stats > div.is-primary { border-color: color-mix(in oklch, var(--color-primary) 35%, var(--line-soft)); background: color-mix(in oklch, var(--color-primary) 5%, transparent); }
.set-team-stats strong { font-size: 1.125rem; font-weight: 600; }
.set-team-stats small { color: var(--text-muted); font-size: .75rem; }
.set-seats { margin: 1rem 0 0; padding: 0; list-style: none; }
.set-seat { padding: .75rem 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .75rem 1rem; border-top: 1px solid var(--line-soft); }
.set-seat-who { min-width: 0; display: flex; align-items: center; gap: .75rem; }
.set-seat-avatar { width: 36px; height: 36px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 12px; color: var(--color-primary-ink); background: color-mix(in oklch, var(--color-primary) 14%, var(--color-surface)); font-weight: 600; object-fit: cover; }
.set-seat-avatar.is-empty { border: 1px dashed var(--line-strong); color: var(--text-muted); background: transparent; }
.set-seat-avatar .svg-glyph { width: 1rem; height: 1rem; }
.set-seat-id { min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.set-seat-name { overflow: hidden; font-size: .875rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.set-seat.is-empty .set-seat-name { color: var(--text-secondary); }
.set-seat-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .375rem; }
.set-seat-meta small { color: var(--text-muted); font-size: .75rem; }
.set-seat-pill { padding: .0625rem .4375rem; border-radius: var(--radius-full); color: var(--text-secondary); background: var(--color-surface-2); font-size: .6875rem; font-weight: 600; }
.set-seat-pill.is-owner, .set-seat-pill.is-active { color: var(--color-primary-ink); background: color-mix(in oklch, var(--color-primary) 14%, var(--color-surface)); }
.set-seat-pill.is-invited { color: #6b5212; background: color-mix(in oklch, var(--color-warning) 22%, var(--color-surface)); }
.set-seat-pill.is-payg { color: #1d5f68; background: color-mix(in oklch, var(--color-info) 20%, var(--color-surface)); }
.set-seat-storage { display: flex; flex-direction: column; align-items: flex-end; gap: .125rem; color: var(--text-muted); font-size: .75rem; }
.set-seat-manage { min-width: 0; display: flex; justify-content: flex-end; }
.set-seat-add-btn { width: 100%; margin-top: .75rem; padding: .75rem; display: flex; align-items: center; justify-content: center; gap: .5rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); color: var(--color-primary-ink); background: transparent; font: inherit; font-size: .875rem; }
.set-seat-add-btn:hover:not(:disabled) { border-color: var(--color-primary); background: color-mix(in oklch, var(--color-primary) 5%, transparent); }
.set-seat-add-btn .svg-glyph { width: 1rem; height: 1rem; }
.set-seat-add { margin-top: .75rem; padding: 1rem; display: grid; gap: .5rem; border-radius: var(--radius-md); background: var(--color-surface-1); animation: mkRise 180ms cubic-bezier(.2,.8,.2,1); }
.set-seat-add-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; }
.set-seat-add-fields .field { min-width: 180px; margin: 0; }
.set-seat-plan { align-self: center; font-size: .875rem; }
.set-seat-plan small { color: var(--text-muted); }
@media (max-width: 640px) {
  .set-seat { grid-template-columns: minmax(0, 1fr) auto; }
  .set-seat-manage { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ── Account settings layout: the app's settings rows ───────────────────── */
.account-layout { grid-template-columns: 200px minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.account-rail { position: sticky; top: 88px; padding: .5rem; display: grid; gap: 2px; align-self: start; }
.account-rail button { width: 100%; text-align: start; }
.account-rail button.active { color: var(--text-primary); background: color-mix(in oklch, var(--color-primary) 15%, transparent); }
.account-panel { min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.set-panel-head { margin-bottom: 1.25rem; }
.set-panel-head h2 { margin: 0; font-size: 1.75rem; font-weight: 600; line-height: 1.2; }
.set-panel-head p { margin: .375rem 0 0; color: var(--text-secondary); font-size: .9375rem; }
.account-panel .settings-stack { display: grid; gap: 1rem; }
.account-panel .settings-card { padding: 1.125rem 1.5rem; border-radius: var(--radius-lg); }
.account-panel .settings-card > h3 { margin: 0 0 .25rem; color: var(--text-muted); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.account-panel .settings-card > p, .account-panel .settings-card > .set-muted, .account-panel .settings-card > .set-warn { font-size: .875rem; }
.account-panel .form-actions { margin-top: 1rem; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.account-panel .form-actions .button { flex: 0 0 auto; }
.account-panel > .workflow-status { margin-top: 1rem; }
.set-row { padding: .875rem 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 2rem; border-top: 1px solid var(--line-soft); }
.settings-card > h3 + .set-row, .settings-card > .set-row:first-child, .ui-collapse-inner > .set-row:first-child { border-top: 0; }
.set-row-label { min-width: 0; flex: 1 1 12rem; display: flex; flex-direction: column; gap: .125rem; }
.set-row-label > label, .set-row-label > span { color: var(--text-primary); font-size: .9375rem; }
.set-row-label > small { color: var(--text-muted); font-size: .8125rem; line-height: 1.5; overflow-wrap: anywhere; }
.set-row-control { min-width: 0; max-width: 100%; flex: 0 1 auto; display: flex; justify-content: flex-end; align-items: center; gap: .5rem; }
.set-row-control > :is(input, .nq-date, .nq-select, .password-wrap, .set-phone, .set-email, .set-inline-save) { width: 24rem; max-width: 100%; }
.set-row-control > .set-email { width: 28rem; }
.set-row-control :is(.password-wrap, .set-phone) input { width: 100%; }
.account-panel .settings-card .set-card-head h3 { color: var(--text-muted); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.set-card-head + .set-row { border-top: 0; }
:is(.set-row-control, .set-tf-flow) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
  min-width: 0;
  min-height: 40px;
  padding: .5rem .625rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  background: color-mix(in oklch, var(--color-on-surface) 4%, transparent);
  font: inherit;
  font-size: .875rem;
  transition: border-color 120ms ease;
}
:is(.set-row-control, .set-tf-flow) input:hover { border-color: color-mix(in oklch, var(--color-on-surface) 32%, transparent); }
:is(.set-row-control, .set-tf-flow) input:focus { border-color: var(--color-primary); outline: none; }
:is(.set-row-control, .set-tf-flow) input:disabled { cursor: not-allowed; opacity: .55; }
.set-row-control .password-wrap { position: relative; }
.set-phone { display: grid; grid-template-columns: minmax(8.5rem, .55fr) minmax(0, 1fr); gap: .5rem; direction: ltr; }
[dir="rtl"] .set-phone .nq-select { direction: rtl; }
.set-email { display: flex; align-items: center; gap: .5rem; }
.set-email input { flex: 1; }
.set-inline-save { display: flex; gap: .5rem; }
.set-inline-save input { flex: 1; }
.profile-photo-row { margin: 0; display: flex; align-items: center; gap: 1rem; }
.profile-photo-row > div:not(.profile-photo-actions) { min-width: 0; display: flex; flex-direction: column; gap: .125rem; }
.profile-photo-row b { font-size: 1.0625rem; font-weight: 600; }
.profile-photo-row small { color: var(--text-muted); font-size: .8125rem; }
.profile-photo-actions { margin-inline-start: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.set-danger-box { margin-top: .5rem; padding: 1rem 1.125rem; border: 1px solid color-mix(in srgb, var(--color-danger) 30%, var(--line-soft)); border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-danger) 5%, var(--color-surface)); }
.set-danger-box > p { margin: 0 0 .5rem; color: var(--text-secondary); font-size: .875rem; line-height: 1.7; }
.set-danger-box .set-row { border-top-color: color-mix(in srgb, var(--color-danger) 18%, var(--line-soft)); }
.set-inline-form input { width: 9rem; min-height: 40px; padding: .5rem; border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: color-mix(in oklch, var(--color-on-surface) 4%, transparent); font: inherit; }
.account-panel .settings-list > div { min-height: 56px; font-size: .875rem; }
.account-panel .settings-list small { font-size: .8125rem; }
.account-panel .inline-action { font-size: .8125rem; }
.account-panel .set-facts > div { font-size: .9375rem; }
.account-panel .metric-card { padding: 1.25rem 1.5rem; }
.account-panel .metric-card > span { color: var(--text-muted); font-size: .875rem; }
.account-panel .form-grid { gap: .875rem 1rem; }
.account-panel .empty-state { padding: 2rem; text-align: center; }
.account-panel .empty-state .button { margin-top: .5rem; }
@media (max-width: 860px) {
  .account-layout { grid-template-columns: minmax(0, 1fr); }
  .account-rail { position: static; display: flex; overflow-x: auto; scrollbar-width: none; }
  .account-rail::-webkit-scrollbar { display: none; }
  .account-rail button { width: auto; flex: 0 0 auto; white-space: nowrap; }
}
@media (max-width: 640px) {
  .set-row { gap: .5rem; }
  .set-row-control:has(> :is(input, .nq-date, .nq-select, .password-wrap, .set-phone, .set-email, .set-inline-save)) { flex: 1 1 100%; }
  .set-row-control > :is(input, .nq-date, .nq-select, .password-wrap, .set-phone, .set-email, .set-inline-save) { width: 100%; }
  .account-panel .settings-card { padding: 1rem; }
  .set-team-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-photo-row { flex-wrap: wrap; }
  .profile-photo-actions { margin-inline-start: 0; width: 100%; }
  .account-panel .form-actions { justify-content: stretch; }
  .account-panel .form-actions .button { flex: 1 1 auto; }
}
.mk-queue li { grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.3fr) 32px; }
.mk-queue-preview { position: relative; width: 72px; height: 72px; grid-row: span 2; overflow: hidden; border-radius: var(--radius-md); background: color-mix(in oklch, var(--color-on-surface) 3%, var(--color-surface)); }
.mk-queue-preview.is-failed { display: grid; place-items: center; color: var(--text-muted); font-size: .6875rem; text-align: center; }
.mk-queue li .mk-slug-state { grid-column: 2 / -1; }
@media (max-width: 760px) {
  .mk-queue li { grid-template-columns: 56px minmax(0, 1fr) 32px; }
  .mk-queue-preview { width: 56px; height: 56px; }
  .mk-queue li .mk-slug { grid-column: 2 / -1; grid-row: 2; }
}

/* Pill tabs and filters: the active pill uses the Nusuq color everywhere. */
.filter-bar button:hover { color: var(--text-primary); background: var(--color-surface-1); border-color: var(--line-strong); }
.filter-bar .filter-active, .filter-bar .filter-active:hover { color: var(--color-on-primary); background: var(--color-primary); border-color: var(--color-primary); }
.billing-toggle button.active { color: var(--color-on-primary); background: var(--color-primary); }

/* Data-export download page (/data-export/, initDataExport in product-workflows.js). */
.dx-file { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--color-surface-1); }
.dx-file svg { flex: none; width: 20px; height: 20px; color: var(--color-primary); }
.dx-file div { display: grid; gap: 2px; min-width: 0; }
.dx-file b { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.dx-file small { color: var(--text-secondary); font-size: 12px; }
.dx-form { margin-top: 22px; }
.dx-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 18px; letter-spacing: .14em; }

/* The two demo people keep one colour on every avatar, cursor and name tag:
   Alia is Nusuq pink, Ahmed is Nusuq blue. */
:root { --person-alia: var(--palette-pink-200); --person-ahmed: var(--palette-blue-300); }
.is-alia { --person: var(--person-alia); }
.is-ahmed { --person: var(--person-ahmed); }
:is(.is-alia, .is-ahmed):not(.cursor, .flow-cursor, .as-cursor) { color: var(--palette-neutral-950) !important; background: var(--person) !important; }
.cursor:is(.is-alia, .is-ahmed) { background: var(--person) !important; }
.flow-cursor:is(.is-alia, .is-ahmed) span { border-top-color: var(--person); }
.flow-cursor:is(.is-alia, .is-ahmed) b { color: var(--palette-neutral-950); background: var(--person); }
.as-cursor:is(.is-alia, .is-ahmed) em { color: var(--palette-neutral-950); }

/* Phone calling codes ("+966 Saudi Arabia"): the list is wider than its control,
   and every long list opens with a search box pinned above its options. */
.nq-select:has(> .phone-country-select) .nq-select-menu { max-height: 300px; }
/* Specific enough to beat the forms' own input rules, which made it see-through. */
.nq-select .nq-select-menu > input.nq-select-search:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
  display: block;
  box-sizing: border-box;
  min-height: 0;
  box-shadow: none;
  position: sticky;
  top: -.5rem;
  z-index: 1;
  width: calc(100% + 1rem);
  margin: -.5rem -.5rem .35rem;
  padding: .6rem .75rem;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: var(--color-surface, #fff);
  color: var(--text-primary);
  font: inherit;
  font-size: .875rem;
  outline: none;
}
.nq-dial { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.nq-select-option[hidden] { display: none; }
.nq-select-option > span:first-child, .nq-select-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* The drawn scrollbar thumb (app: 01-design-tokens.css .ovs-thumb). Positioned by
   assets/overlay-scrollbars.js; only its looks live here. z-index 150 keeps it above
   the header and this site's dialogs (120–140), below the page loader. */
.ovs-thumb {
  position: fixed;
  width: 6px; /* SIZE in overlay-scrollbars.js */
  border-radius: 999px;
  background: var(--color-primary);
  z-index: 150;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.15s ease;
}
.ovs-thumb--x {
  width: auto;
  height: 6px;
}
.ovs-thumb.is-visible {
  opacity: 1;
}
.ovs-thumb:hover,
.ovs-thumb.is-dragging {
  opacity: 1;
  background: color-mix(in oklch, var(--color-primary) 84%, black);
}
@media (prefers-reduced-motion: reduce) {
  .ovs-thumb {
    transition: none;
  }
}

/* Page loader — the app's start-up LoadingThumb (app: components/ui/loading-thumb,
   18-drive-page.css): a primary-arc ring over "Loading…", centred on the page
   surface. A head snippet from tools/seo.mjs adds html.is-loading before first
   paint and swaps it for .is-loaded (the fade-out) on nusuq:page-rendered, on
   window load, or after 8 s, whichever comes first. No JavaScript, no loader. */
html.is-loading body::before,
html.is-loaded body::before {
  content: "Loading\2026";
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: grid;
  place-items: center;
  background: var(--color-surface);
  color: var(--text-muted);
  font: 500 0.875rem/20px var(--font-primary);
  letter-spacing: 0.01em;
  padding-top: 44px; /* ring (32px) + the app's 12px gap; the label sits under it */
  transition: opacity 0.2s ease;
}
html.loading-ar body::before {
  content: "\062C\0627\0631\064D  \0627\0644\062A\062D\0645\064A\0644\2026";
  letter-spacing: 0;
  direction: rtl; /* the page is still LTR until pages.js sets dir */
}
html.is-loading body::after,
html.is-loaded body::after {
  content: "";
  position: fixed;
  z-index: 2147483647;
  top: calc(50% - 32px);
  left: calc(50% - 16px);
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  border: 3px solid color-mix(in oklch, var(--color-on-surface) 20%, transparent);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: page-loader-spin 0.75s linear infinite;
  transition: opacity 0.2s ease;
}
html.is-loaded body::before,
html.is-loaded body::after {
  opacity: 0;
  pointer-events: none;
}
@keyframes page-loader-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  html.is-loading body::after {
    animation-duration: 1.5s;
  }
}

/* ── Checkout (/checkout/, initCheckout + initSeatCheckout in product-workflows.js)
   The same shape as the app's checkout, in the site's own settings vocabulary:
   back link, heading, then the order (settings-card) beside the payment
   (settings-card) — Radio rows with card badges, Tap's form, Cancel / Pay. */
.auth-card.co-host { max-width: 68rem; width: min(68rem, calc(100vw - 28px)); padding: 0; border: 0; background: transparent; box-shadow: none; }
.co-site { display: grid; gap: 0; }
.co-backlink { display: inline-flex; align-items: center; gap: .375rem; width: fit-content; margin: 0 0 1.25rem -.5rem; padding: .3rem .5rem; border-radius: var(--radius-md); color: var(--text-muted); font-size: .875rem; text-decoration: none; transition: background 120ms ease, color 120ms ease; }
.co-backlink:hover { color: var(--text-primary); background: color-mix(in oklch, var(--color-on-surface) 6%, transparent); }
.co-backlink .svg-glyph { width: 16px; height: 16px; }
[dir="rtl"] .co-backlink { margin: 0 -.5rem 1.25rem 0; }
[dir="rtl"] .co-backlink .svg-glyph { transform: scaleX(-1); }
.co-site > .page-kicker { display: inline-flex; align-items: center; gap: .375rem; margin: 0 0 .5rem; color: var(--color-primary-ink, var(--text-muted)); }
.co-site > h1 { margin: 0; font-size: clamp(1.75rem, 3.2vw, 2.5rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.co-lead { margin: .5rem 0 0; max-width: 72ch; color: var(--text-secondary); font-size: .9375rem; line-height: 1.55; }
.co-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 1rem; align-items: start; margin-top: 1.75rem; }
@media (max-width: 860px) { .co-grid { grid-template-columns: minmax(0, 1fr); } }
.co-card.settings-card { padding: 1.25rem 1.5rem; border-radius: var(--radius-lg); }
.co-card > h3 { margin: 0 0 .5rem; color: var(--text-muted); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
@media (min-width: 861px) { form.co-card { position: sticky; top: 88px; } }

/* the item */
.co-item { display: flex; align-items: center; gap: .75rem; padding: .5rem 0 .875rem; }
.co-item-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--radius-md); border: 1px solid var(--line-soft); background: color-mix(in oklch, var(--color-on-surface) 4%, var(--color-surface)); color: var(--color-primary-ink, var(--text-primary)); }
.co-item-icon .svg-glyph { width: 20px; height: 20px; }
.co-item-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: .125rem; }
.co-item-copy strong { font-size: .9375rem; font-weight: 600; color: var(--text-primary); }
.co-item-copy small, .co-item-price small { color: var(--text-muted); font-size: .8125rem; }
.co-item-price { display: flex; align-items: baseline; gap: .25rem; white-space: nowrap; }
.co-item-price strong { font-weight: 600; color: var(--color-primary-ink, var(--text-primary)); }

/* what's included */
.co-includes { display: grid; gap: .5rem; margin: 0; padding: .875rem 0; border-top: 1px solid var(--line-soft); list-style: none; }
.co-includes li { display: flex; align-items: center; gap: .5rem; color: var(--text-secondary); font-size: .875rem; }
.co-includes .svg-glyph { flex: none; width: 15px; height: 15px; color: var(--color-primary-ink, var(--color-primary)); }
.co-more { margin: -.375rem 0 .75rem; color: var(--text-muted); font-size: .8125rem; }
.co-card .set-row .set-value { color: var(--text-secondary); font-size: .875rem; }

/* the total — the inset box the account page uses for billing */
.co-total { display: grid; gap: .5rem; margin-top: .75rem; padding: 1rem; border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: color-mix(in oklch, var(--color-on-surface) 5%, var(--color-surface)); }
.co-total > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.co-total > div span { color: var(--text-secondary); }
.co-total > div strong { font-size: 1.375rem; font-weight: 600; color: var(--color-primary-ink, var(--text-primary)); }
.co-total p { margin: 0; color: var(--text-muted); font-size: .8125rem; line-height: 1.5; }

/* choosing a card */
.co-choices { display: grid; gap: .25rem; }
.co-choice { position: relative; display: flex; align-items: center; gap: .75rem; padding: .7rem .75rem; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; transition: background 120ms ease, border-color 120ms ease; }
.co-choice:hover { background: color-mix(in oklch, var(--color-on-surface) 4%, transparent); }
.co-choice.is-on { border-color: var(--line-soft); background: color-mix(in oklch, var(--color-on-surface) 5%, var(--color-surface)); }
.co-choice > input { position: absolute; opacity: 0; pointer-events: none; }
.co-radio { flex: none; width: 18px; height: 18px; border-radius: 999px; border: 2px solid color-mix(in oklch, var(--color-on-surface) 30%, transparent); transition: border-color 120ms ease; }
.co-choice > input:checked + .co-radio { border-color: var(--color-primary); background: radial-gradient(circle, var(--color-primary) 0 40%, transparent 45%); }
.co-choice > input:focus-visible + .co-radio { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.co-badge { flex: none; color: var(--text-muted); }
.co-choice-copy { display: flex; min-width: 0; flex-direction: column; gap: .125rem; }
.co-choice-copy strong { font-size: .875rem; font-weight: 600; color: var(--text-primary); }
.co-choice-copy small { color: var(--text-muted); font-size: .75rem; }
.co-newcard { padding: .75rem 0 .25rem; }
.co-choices .co-newcard { padding-inline: 0; }
.co-test { margin: 0 0 .75rem; padding: .5rem .75rem; border-radius: var(--radius-md); background: color-mix(in oklch, var(--color-primary) 10%, transparent); color: var(--text-secondary); font-size: .75rem; }

/* Cancel / Pay, then who processes the card */
.co-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
.co-actions .button { flex: 0 0 auto; }
.co-actions-start { justify-content: flex-start; }
.co-actions-center { justify-content: center; }
.co-card .workflow-status { margin-top: .75rem; }
.co-secure { display: grid; gap: .5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); }
.co-secure p { display: flex; align-items: center; gap: .375rem; margin: 0; color: var(--text-muted); font-size: .75rem; line-height: 1.5; }
.co-lock { flex: none; }
.co-brands { display: flex; flex-wrap: wrap; gap: .375rem; }

/* busy, done */
.co-busy { display: flex; align-items: center; gap: .5rem; margin: 2rem 0; color: var(--text-muted); }
.co-spinner { width: 16px; height: 16px; border-radius: 999px; border: 2px solid color-mix(in oklch, var(--color-on-surface) 14%, transparent); border-top-color: var(--color-primary); animation: co-spin .8s linear infinite; }
@keyframes co-spin { to { transform: rotate(360deg); } }
.co-done.settings-card { display: grid; justify-items: center; gap: .25rem; max-width: 34rem; margin: 2rem auto 0; padding: 2rem 1.5rem; text-align: center; }
.co-done .page-kicker { margin: .5rem 0 0; }
.co-done h2 { margin: 0; font-size: 1.5rem; font-weight: 600; }
.co-done p { margin: .25rem 0 0; color: var(--text-secondary); font-size: .9375rem; }
.co-done p.co-note { color: var(--text-muted); font-size: .8125rem; }
.co-done-tick { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 999px; background: color-mix(in oklch, var(--color-primary) 16%, var(--color-surface)); color: var(--color-primary-ink, var(--color-primary)); }
.co-done-tick .svg-glyph { width: 24px; height: 24px; }
@media (prefers-reduced-motion: reduce) { .co-spinner { animation: none; } }
/* company two-step policy: the setup on /signin/, and a method it no longer accepts */
.mfa-setup { margin-top: 8px; display: grid; gap: 4px; }
.mfa-setup .settings-stack { margin-top: 12px; }
.set-row.is-warn .set-row-label small { color: #8a5a10; }