/* Newcomer · "First Light" component layer over KDS v1. Tokens live in /css/theme.css (:root).
   Shared by every page. Area stylesheets COMPOSE these; they never restyle .nl-* globally.
   Rules: content is visible without JS; [hidden] always wins; motion only inside prefers-reduced-motion: no-preference. */

[hidden] { display: none !important; }

/* Site header + footer (partials/nav-newcomer, footer-newcomer) are built in Tailwind utilities, which live in cascade
   layers; theme.css's unlayered base rules (h1-h4, p, a, img/svg) would beat them, so the chrome rolls back to the layer. */
:where(.nc-chrome) :is(h1, h2, h3, h4, p, a) { all: revert-layer; }
:where(.nc-chrome) a:hover { all: revert-layer; }
:where(.nc-chrome) :is(img, svg) { max-width: revert-layer; height: revert-layer; }
:where(.nc-chrome) :focus-visible { outline: 2px solid var(--cc-navy); outline-offset: 3px; }
:where(.nc-chrome) .nc-dark :focus-visible { outline-color: var(--nl-route); }

/* ---------- type ---------- */
.nl-display { font-family: var(--cc-font-display); font-weight: 800; letter-spacing: var(--nl-tracking-display); line-height: 1.04; color: var(--cc-navy); text-wrap: balance; }
.nl-display--hero { font-size: var(--yf-display-hero); }
.nl-display--xl { font-size: var(--yf-display-xl); }
.nl-display--lg { font-size: var(--yf-display-lg); }
.nl-display--md { font-size: var(--yf-display-md); line-height: 1.1; }
.nl-lead { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.6; color: var(--cc-ink-muted); max-width: 62ch; text-wrap: pretty; }
.nl-num { font-variant-numeric: tabular-nums; }

/* ---------- the sky: the ONE decorative device ---------- */
/* Dark dawn band for page heads and feature bands. Text inside is white; use .nl-glass panels for forms over it. */
.nl-sky { position: relative; isolation: isolate; background: var(--nl-sky); color: #fff; overflow: hidden; }
.nl-sky::before { /* soft sun on the horizon */
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: min(900px, 120vw); aspect-ratio: 1; right: -18%; bottom: -70%;
  background: radial-gradient(circle, color-mix(in srgb, var(--nl-dawn-gold) 55%, transparent) 0%, transparent 62%);
}
.nl-sky::after { /* faint star grain in the night part */
  content: ""; position: absolute; inset: 0 0 45% 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: radial-gradient(1px 1px at 12% 22%, #fff9 50%, transparent 51%), radial-gradient(1px 1px at 38% 12%, #fff6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 64% 30%, #fff8 50%, transparent 51%), radial-gradient(1px 1px at 82% 14%, #fff7 50%, transparent 51%),
    radial-gradient(1px 1px at 24% 48%, #fff5 50%, transparent 51%), radial-gradient(1px 1px at 91% 42%, #fff5 50%, transparent 51%);
}
.nl-sky :is(h1, h2, h3, .nl-display) { color: #fff; }
.nl-sky .nl-lead { color: color-mix(in srgb, #fff 82%, transparent); }
.nl-sky a:not(.kds-btn):not(.nl-btn) { color: #fff; text-decoration-color: var(--nl-dawn-gold); }
/* Light variant for content pages: first light on snow */
.nl-sky--soft { background: var(--nl-sky-soft); color: var(--cc-ink); }
.nl-sky--soft::after { display: none; }
.nl-sky--soft::before { background: radial-gradient(circle, color-mix(in srgb, var(--nl-dawn-gold) 30%, transparent) 0%, transparent 60%); }
.nl-sky--soft :is(h1, h2, h3, .nl-display) { color: var(--cc-navy); }
.nl-sky--soft .nl-lead { color: var(--cc-ink-muted); }
.nl-sky--soft a:not(.kds-btn):not(.nl-btn) { color: var(--cc-navy); text-decoration-color: var(--nl-route); }

/* ---------- page head (every inner page) ---------- */
.nl-pagehead { padding-block: clamp(40px, 6vw, 88px) clamp(36px, 5vw, 72px); }
.nl-pagehead__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 18px; font-size: .875rem; font-weight: 600; }
.nl-pagehead__crumbs a { color: inherit; opacity: .8; text-decoration: none; }
.nl-pagehead__crumbs a:hover { opacity: 1; text-decoration: underline; }
.nl-pagehead__crumbs > * + *::before { content: ""; display: inline-block; width: 18px; margin-right: 10px; vertical-align: middle; border-top: 2px dotted var(--nl-route); }
.nl-pagehead .nl-lead { margin-top: 16px; }
/* when a panel overlaps the head bottom edge */
.nl-overlap { margin-top: calc(-1 * clamp(28px, 4vw, 56px)); position: relative; z-index: 2; }

/* ---------- surfaces ---------- */
.nl-card { background: #fff; border: 1px solid var(--cc-line); border-radius: var(--kds-radius-lg); box-shadow: var(--kds-shadow-1); padding: clamp(18px, 2.4vw, 28px); }
.nl-card--flat { box-shadow: none; }
.nl-card--interactive { transition: transform var(--kds-dur-base, 200ms) var(--kds-ease-standard, ease), box-shadow var(--kds-dur-base, 200ms) var(--kds-ease-standard, ease), border-color var(--kds-dur-base, 200ms); }
.nl-card--interactive:hover { transform: translateY(-2px); box-shadow: var(--kds-shadow-2); border-color: var(--cc-line-strong); }
.nl-glass { background: var(--nl-glass); border: 1px solid var(--nl-glass-border); border-radius: var(--kds-radius-xl); box-shadow: var(--kds-shadow-3); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); color: var(--cc-ink); padding: clamp(20px, 3vw, 36px); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .nl-glass { background: #fff; } }
.nl-panel { background: var(--cc-surface); border-radius: var(--kds-radius-lg); padding: clamp(18px, 2.4vw, 28px); }
.nl-horizon-rule { height: 3px; border: 0; border-radius: 3px; background: var(--nl-horizon); margin: 0; }

/* ---------- wayfinding: dotted route + stops ---------- */
.nl-route { position: relative; list-style: none; margin: 0; padding: 0 0 0 30px; }
.nl-route::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; border-left: var(--route-width) dotted var(--route-color); }
.nl-route > li { position: relative; padding: 0 0 22px; }
.nl-route > li:last-child { padding-bottom: 0; }
.nl-route > li::before { content: ""; position: absolute; left: -30px; top: 5px; width: var(--node-size); height: var(--node-size); border-radius: 50%; background: #fff; border: 2px solid var(--route-color); box-sizing: border-box; }
.nl-route > li.is-done::before { background: var(--cc-navy); border-color: var(--cc-navy); }
.nl-route > li.is-current::before { background: var(--route-active); border-color: var(--route-active); box-shadow: 0 0 0 5px color-mix(in srgb, var(--route-active) 18%, transparent); }
/* horizontal stepper (checkout, signup, posting flow) */
.nl-steps { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; counter-reset: nl-step; }
.nl-steps > li { flex: 1; position: relative; padding-top: 22px; font-size: .8125rem; font-weight: 700; color: var(--cc-ink-faint); }
.nl-steps > li::before { content: ""; position: absolute; top: 0; left: 0; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--nl-route); background: #fff; box-sizing: border-box; z-index: 1; }
.nl-steps > li::after { content: ""; position: absolute; top: 5px; left: 12px; right: 0; border-top: 2px dotted var(--nl-route); }
.nl-steps > li:last-child::after { display: none; }
.nl-steps > li.is-done { color: var(--cc-ink-muted); }
.nl-steps > li.is-done::before { background: var(--cc-navy); border-color: var(--cc-navy); }
.nl-steps > li.is-current { color: var(--cc-navy); }
.nl-steps > li.is-current::before { background: var(--cc-red); border-color: var(--cc-red); }

/* ---------- actions ---------- */
.nl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: var(--cc-btn-radius); border: 1px solid transparent; font: 700 1rem/1 var(--cc-font-display); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .18s, color .18s, border-color .18s, transform .18s; }
.nl-btn:active { transform: translateY(1px); }
.nl-btn--go { background: var(--cc-red-700); color: #fff; }                /* the ONE primary action per view */
.nl-btn--go:hover { background: var(--cc-red-900); }
.nl-btn--navy { background: var(--cc-navy); color: #fff; }
.nl-btn--navy:hover { background: var(--cc-navy-700); }
.nl-btn--ghost { background: transparent; color: var(--cc-navy); border-color: var(--cc-line-strong); }
.nl-btn--ghost:hover { border-color: var(--cc-navy); }
.nl-sky .nl-btn--ghost { color: #fff; border-color: color-mix(in srgb, #fff 45%, transparent); }
.nl-sky .nl-btn--ghost:hover { border-color: #fff; }
.nl-sky--soft .nl-btn--ghost { color: var(--cc-navy); border-color: var(--cc-line-strong); }
.nl-sky--soft .nl-btn--ghost:hover { border-color: var(--cc-navy); }
.nl-btn--sm { min-height: 40px; padding: 0 16px; font-size: .9375rem; }
.nl-link { color: var(--cc-navy); font-weight: 700; text-decoration: underline; text-decoration-color: var(--nl-route); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.nl-link:hover { color: var(--cc-spark-700); }

/* ---------- chips & tags ---------- */
.nl-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--cc-surface); border: 1px solid var(--cc-line); color: var(--cc-ink); font-size: .8125rem; font-weight: 600; text-decoration: none; }
a.nl-chip:hover, button.nl-chip:hover { border-color: var(--cc-navy); }
.nl-chip.is-on, .nl-chip[aria-pressed="true"] { background: var(--cc-navy); border-color: var(--cc-navy); color: #fff; }
.nl-chip--welcome { background: var(--cc-red-100); border-color: color-mix(in srgb, var(--cc-red) 25%, transparent); color: var(--cc-red-900); } /* "welcomes newcomers" */
.nl-chip--gold { background: var(--cc-spark-100); border-color: color-mix(in srgb, var(--cc-spark) 45%, transparent); color: var(--cc-spark-700); }

/* ---------- forms: 16px+ text so iOS never zooms; 48px controls on touch ---------- */
.nl-field { display: grid; gap: 8px; }
.nl-field > label, .nl-label { font-size: .875rem; font-weight: 700; color: var(--cc-navy); }
.nl-input, .nl-select, .nl-textarea { width: 100%; min-height: 50px; padding: 12px 16px; border: 1.5px solid var(--cc-line-strong); border-radius: var(--kds-radius-md); background: #fff; color: var(--cc-ink); font: 500 1rem/1.4 var(--kds-font-sans); transition: border-color .15s, box-shadow .15s; }
.nl-textarea { min-height: 120px; }
.nl-input:focus, .nl-select:focus, .nl-textarea:focus { outline: none; border-color: var(--cc-navy); box-shadow: 0 0 0 4px var(--kds-focus-ring); }
.nl-hint { font-size: .8125rem; color: var(--cc-ink-muted); }
.nl-error { font-size: .8125rem; font-weight: 600; color: var(--cc-red-700); }

/* ---------- empty state (never a bare "No results") ---------- */
.nl-empty { text-align: center; padding: clamp(32px, 6vw, 64px) 20px; border: 1.5px dashed var(--cc-line-strong); border-radius: var(--kds-radius-lg); background: var(--cc-surface); }
.nl-empty h2, .nl-empty h3 { font: 800 1.25rem/1.25 var(--cc-font-display); color: var(--cc-navy); margin: 0 0 8px; }
.nl-empty p { color: var(--cc-ink-muted); margin: 0 auto 18px; max-width: 46ch; }

/* ---------- stat (only for real, non-embarrassing numbers) ---------- */
.nl-stat__n { font: 800 clamp(1.75rem, 1.2rem + 2vw, 2.5rem)/1 var(--cc-font-display); letter-spacing: -0.03em; color: var(--cc-navy); font-variant-numeric: tabular-nums; }
.nl-stat__l { font-size: .875rem; color: var(--cc-ink-muted); margin-top: 6px; }

/* ---------- motion: arrival, not decoration ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .nl-rise { animation: nl-rise .7s cubic-bezier(.16, 1, .3, 1) both; animation-delay: var(--nl-delay, 0s); }
  @keyframes nl-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
}

/* ---------- touch ---------- */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: max(16px, 1rem); }
  .nl-btn, .kds-btn { min-height: 48px; }
}

/* ---------- Newcomer fit + pay in context (data: lib/fit.js, exposed to views as `fit`) ---------- */
/* Fit strip: render fit.fitSignals(job) as .nl-fit > .nl-fit__item[data-tone]. Compact on rows, roomy on detail. */
.nl-fit { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.nl-fit__item { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px 0 8px; border-radius: 999px; font-size: .8125rem; font-weight: 700; line-height: 1.2; background: var(--cc-surface); color: var(--cc-navy); border: 1px solid var(--cc-line); }
.nl-fit__item::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cc-navy); flex: none; }
.nl-fit__item[data-tone="welcome"] { background: var(--cc-red-100); border-color: color-mix(in srgb, var(--cc-red) 22%, transparent); color: var(--cc-red-900); }
.nl-fit__item[data-tone="welcome"]::before { background: var(--cc-red); }
.nl-fit__item[data-tone="gold"] { background: var(--cc-spark-100); border-color: color-mix(in srgb, var(--cc-spark) 40%, transparent); color: var(--cc-spark-700); }
.nl-fit__item[data-tone="gold"]::before { background: var(--cc-spark); }
/* Detail variant: a list with the plain-language detail under each label */
.nl-fit--detail { display: grid; gap: 10px; }
.nl-fit--detail .nl-fit__item { display: grid; grid-template-columns: 10px 1fr; align-items: start; column-gap: 12px; min-height: 0; padding: 12px 14px; border-radius: var(--kds-radius-md); }
.nl-fit--detail .nl-fit__item::before { margin-top: 6px; }
.nl-fit__detail { grid-column: 2; font-weight: 500; font-size: .875rem; color: var(--cc-ink-muted); margin-top: 2px; }
/* Pay in context: one quiet line under the salary */
.nl-pay { display: block; font-size: .8125rem; font-weight: 600; color: var(--cc-ink-muted); font-variant-numeric: tabular-nums; }
.nl-pay__est { color: var(--cc-navy); }

/* ======================================================================================================
   THE DESK — logged-in app shell (views/partials/desk.ejs, lib/desk.js). Full-bleed, app-like: slim night app bar,
   left rail ≥1024px, bottom tab bar on phones. Replaces the marketing header/footer on every logged-in workspace page.
   ====================================================================================================== */
.has-desk { background: var(--cc-surface); }
.desk-ico { width: 20px; height: 20px; flex: none; }
.desk-bar { position: sticky; top: 0; z-index: 600; background: var(--cc-navy); color: #fff; }
.desk-bar__in { display: flex; align-items: center; gap: 16px; min-height: 60px; padding: 0 clamp(12px, 2vw, 24px); }
.desk-bar__home { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; flex: none; }
.desk-bar__home img { width: 34px; height: 34px; border-radius: 10px; display: block; }
.desk-bar__name { font: 800 1.0625rem/1 var(--cc-font-display); letter-spacing: -0.01em; }
.desk-client { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 12px; border-radius: 999px; background: color-mix(in srgb, #fff 10%, transparent); border: 1px solid color-mix(in srgb, #fff 18%, transparent); color: #fff; text-decoration: none; max-width: 32vw; }
.desk-client__lbl { font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--nl-route); }
.desk-client__name { font-weight: 700; font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.desk-search { position: relative; flex: 1; max-width: 520px; margin-left: auto; }
.desk-search .desk-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: color-mix(in srgb, #fff 60%, transparent); }
.desk-search input { width: 100%; min-height: 40px; padding: 0 14px 0 40px; border-radius: 999px; border: 1px solid color-mix(in srgb, #fff 16%, transparent); background: color-mix(in srgb, #fff 8%, transparent); color: #fff; font: 500 .9375rem/1 var(--kds-font-sans); }
.desk-search input::placeholder { color: color-mix(in srgb, #fff 55%, transparent); }
.desk-search input:focus { outline: none; background: #fff; color: var(--cc-ink); border-color: #fff; }
.desk-me { display: flex; align-items: center; gap: 14px; flex: none; }
.desk-me__site { color: color-mix(in srgb, #fff 70%, transparent); font-size: .8125rem; text-decoration: none; }
.desk-me__site:hover { color: #fff; }
.desk-me__menu { position: relative; }
.desk-me__menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-height: 40px; }
.desk-me__menu > summary::-webkit-details-marker { display: none; }
.desk-me__av { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--nl-route); color: var(--cc-navy); font: 800 .8125rem/1 var(--cc-font-display); }
.desk-me__nm { font-weight: 700; font-size: .875rem; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desk-me__pop { position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px; background: #fff; color: var(--cc-ink); border: 1px solid var(--cc-line); border-radius: var(--kds-radius-md); box-shadow: var(--kds-shadow-3); padding: 8px; display: grid; }
.desk-me__pop a, .desk-me__pop button { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 10px; color: var(--cc-navy); font: 600 .9375rem/1.2 var(--kds-font-sans); text-decoration: none; background: none; border: 0; cursor: pointer; }
.desk-me__pop a:hover, .desk-me__pop button:hover { background: var(--cc-surface); }
.desk-me__who { margin: 0 0 6px; padding: 8px 12px 10px; border-bottom: 1px solid var(--cc-line); display: grid; gap: 2px; font-size: .8125rem; color: var(--cc-ink-muted); }
.desk-me__who strong { color: var(--cc-navy); font-size: .9375rem; }

.desk { display: block; min-height: calc(100vh - 60px); }
.desk-main { min-width: 0; padding-bottom: 96px; }                         /* room for the phone tab bar */
.desk-main > .site-main { min-width: 0; }
.desk-rail { display: none; }
@media (min-width: 1024px) {
  .desk { display: grid; grid-template-columns: 248px minmax(0, 1fr); }
  .desk-main { padding-bottom: 40px; }
  .desk-rail { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 60px; align-self: start; height: calc(100vh - 60px); padding: 20px 14px; background: #fff; border-right: 1px solid var(--cc-line); overflow-y: auto; }
  .desk-rail__primary { width: 100%; }
  .desk-rail__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; position: relative; }
  .desk-rail__list::before { content: ""; position: absolute; left: 23px; top: 18px; bottom: 18px; border-left: 2px dotted color-mix(in srgb, var(--nl-route) 70%, transparent); }  /* the route */
  .desk-rail__link { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px 0 14px; border-radius: 12px; color: var(--cc-ink-muted); font-weight: 700; font-size: .9375rem; text-decoration: none; }
  .desk-rail__link .desk-ico { background: #fff; border-radius: 50%; padding: 2px; width: 24px; height: 24px; }
  .desk-rail__link:hover { background: var(--cc-surface); color: var(--cc-navy); }
  .desk-rail__link.is-on { background: var(--cc-navy); color: #fff; }
  .desk-rail__link.is-on .desk-ico { background: var(--cc-navy); color: var(--nl-route); }
  .desk-rail__tag { margin: auto 6px 0; font-size: .8125rem; line-height: 1.5; color: var(--cc-ink-faint); }
  .desk-tabs { display: none !important; }
}
@media (max-width: 1023px) {
  .desk-me__site, .desk-me__nm { display: none; }
  .desk-bar__in { gap: 10px; }
  .desk-search { max-width: none; }
}
@media (max-width: 599px) {
  .desk-bar__name { display: none; }
  .desk-client { max-width: 40vw; }
  .desk-client__lbl { display: none; }
}
/* phone tab bar */
.desk-tabs { position: fixed; z-index: 650; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, #fff 94%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--cc-line); }
.desk-tabs__a { display: grid; justify-items: center; gap: 3px; min-height: 52px; padding: 6px 2px; border-radius: 12px; color: var(--cc-ink-muted); font-size: .6875rem; font-weight: 700; text-decoration: none; }
.desk-tabs__a.is-on { color: var(--cc-navy); }
.desk-tabs__a.is-on .desk-ico { color: var(--cc-red-700); }
.desk-tabs__a--go { color: #fff; }
.desk-tabs__a--go .desk-ico { width: 46px; height: 46px; padding: 12px; margin-top: -22px; border-radius: 50%; background: var(--cc-red-700); color: #fff; box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--cc-red-700) 70%, transparent); }
.desk-tabs__a--go span { color: var(--cc-navy); }
.desk-foot { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; padding: 18px 16px 110px; font-size: .8125rem; color: var(--cc-ink-faint); }
.desk-foot a { color: var(--cc-ink-muted); }
@media (min-width: 1024px) { .desk-foot { padding-bottom: 24px; margin-left: 248px; } }
@media print { .desk-bar, .desk-rail, .desk-tabs, .desk-foot { display: none !important; } .desk { display: block; } }

/* Workspace page head inside the Desk: compact, left-aligned, soft sky. Areas use this instead of big marketing heads. */
.desk-head { padding: clamp(20px, 3vw, 36px) clamp(16px, 3vw, 40px) clamp(16px, 2vw, 24px); background: var(--nl-sky-soft); border-bottom: 1px solid var(--cc-line); }
.desk-head__eyebrow { font-size: .8125rem; font-weight: 700; color: var(--cc-spark-700); margin: 0 0 6px; }
.desk-head h1 { font: 800 clamp(1.625rem, 1.2rem + 1.4vw, 2.375rem)/1.1 var(--cc-font-display); letter-spacing: -0.03em; color: var(--cc-navy); margin: 0; }
.desk-head p { margin: 8px 0 0; color: var(--cc-ink-muted); max-width: 70ch; }
.desk-head__row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; }
.desk-body { padding: clamp(16px, 2.4vw, 32px) clamp(16px, 3vw, 40px); max-width: 1600px; }