/* ===== Natternet home widgets — shared styles =====
   Extracted from the search-first home so every page renders the same widgets
   from one source. Markup lives in public/js/shared/nn-widgets.js.

   Sizing contract: a widget is sized by its host, never by itself. The host sets
   a width (a grid span on the home bento, a fixed px frame in the widget
   catalogue) and optionally --nnw-min-h to tune the art height in pixels.
   Everything inside responds to the tile's own width through container queries,
   so a widget is legible at 300px and at 1280px with no per-page overrides. */

.sf-tile { container-type: inline-size; }

/* Host-side width helpers for the 12-column bento */
.nnw-w-3 { grid-column: span 3; }
.nnw-w-4 { grid-column: span 4; }
.nnw-w-5 { grid-column: span 5; }
.nnw-w-6 { grid-column: span 6; }
.nnw-w-7 { grid-column: span 7; }
.nnw-w-8 { grid-column: span 8; }
.nnw-w-12 { grid-column: span 12; }


/* ===== Bento below the fold ===== */
  .sf-bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; padding-top: 4px;
    padding-bottom: 32px; position: relative; z-index: 10; }
  .sf-tile { background: #fff; border: 1px solid color-mix(in srgb, var(--nn-line) 70%, transparent);
    border-radius: 20px; padding: 20px 22px 22px; min-width: 0;
    box-shadow: 0 1px 2px rgba(0,39,51,.04), 0 14px 30px -26px rgba(0,39,51,.45); }
  .sf-tile-guides { grid-column: span 8; }
  .sf-tile-week { grid-column: span 12; container-type: inline-size; }
  .sf-tile-faces { grid-column: span 3; }
  .sf-tile-execs { grid-column: span 3; order: 14; }  .sf-tile-popular { grid-column: span 12; }

  .sf-tile-popular { grid-column: span 12; }
  /* Before/after: the classic half-row popular tile, scrollbar and no arrows.
     Above the stacking breakpoint only, so narrow screens still go full width. */
  @media (min-width: 1001px) {
    html[data-popular-width="half"] .sf-tile-popular { grid-column: span 8; }
  }
  html[data-popular-width="half"] .sf-rail-nav { display: none; }

  /* The Popular guides tile is a teaser, so its chrome is trimmed hard — every
     pixel saved here is a pixel of the widgets below that stays on screen. */
  .sf-tile-popular { padding-bottom: 12px; }
  .sf-tile-popular .sf-tile-head { margin-bottom: 8px; }
  .sf-tile-popular .sf-rail-wrap { padding-top: 0; }
  .sf-tile-popular .sf-rail { padding: 3px 3px 4px; gap: 12px; }
  .sf-tile-popular .sf-rail-nav { margin-top: 6px; }
  .sf-tile-popular .sf-rail-arw { width: 26px; height: 26px; }

  /* Rail navigation — arrows sit under the rail, right-aligned. */
  .sf-rail-nav { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 2px; }
  .sf-rail-arw { width: 28px; height: 28px; display: grid; place-items: center; padding: 0;
    border: 1px solid var(--nn-line); border-radius: 99px; background: transparent;
    color: var(--nn-body); cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
      opacity var(--dur-fast) var(--ease); }
  .sf-rail-arw svg { width: 14px; height: 14px; }
  .sf-rail-arw:hover { border-color: var(--nn-cyan); color: var(--nn-cyan); }
  .sf-rail-arw[disabled] { opacity: .32; pointer-events: none; }
  @media (max-width: 720px) { .sf-rail-nav { display: none; } }
  .sf-tile-apps { grid-column: span 5; display: flex; flex-direction: column; }
  .sf-tile-tree { grid-column: span 4; position: relative; overflow: hidden;
    display: flex; flex-direction: column; }
  .sf-tile-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 14px; }
  .sf-tile-title { font: 300 20px var(--font-sans); color: var(--nb-teal); letter-spacing: -.02em; margin-right: auto; }
  .sf-tile-sub { width: 100%; font: 400 12px var(--font-sans); color: var(--nn-body); margin-top: 1px; }
  .sf-tile-meta { font: 500 11.5px var(--font-sans); color: var(--nn-body); }
  .sf-tile-link { font: 500 12.5px var(--font-sans); color: var(--nb-teal); text-decoration: none; }
  .sf-tile-link:hover { color: var(--nn-cyan); text-decoration: underline; }
  /* Links inside a tile description — quiet enough not to compete with the title,
     but underlined so they read as links rather than emphasis. Safe to nest here:
     .sf-tile-head sits outside the tile's stage anchor. */
  .sf-sub-link { color: var(--nn-cyan); text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--nn-cyan) 32%, transparent);
    transition: border-color var(--dur-fast) var(--ease); }
  .sf-sub-link:hover { border-bottom-color: currentColor; }

  /* This week — seven quiet columns on desktop, an agenda list on small screens */
  .wk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0; }
  .wk-day { padding: 8px 12px 12px; min-height: 116px; min-width: 0; display: flex; flex-direction: column; gap: 9px;
    border-left: 1px solid var(--nn-line); border-radius: 10px; }
  .wk-day:first-child { border-left: none; }
  .wk-day.today { background: var(--nb-stone); border-left-color: transparent; }
  .wk-day.today .wk-date { color: var(--nn-ink); font-weight: 700; }
  .wk-day.today + .wk-day { border-left-color: transparent; }
  .wk-day.past .wk-body { opacity: .55; }
  /* Today marker variations (data-today on <html>) */
  html[data-today="dot"] .wk-day.today { background: transparent; }
  html[data-today="dot"] .wk-day.today .wk-head::before { content: ""; width: 5px; height: 5px;
    border-radius: 99px; background: var(--nb-teal); align-self: center; }
  .wk-head { display: flex; align-items: baseline; gap: 6px; }
  .wk-dow { font: 600 10.5px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--nb-gray-300); }
  .wk-day.today .wk-dow { color: var(--nb-gray-800); }
  .wk-date { font: 600 12px var(--font-sans); color: var(--nn-ink); }
  .wk-ev { display: flex; align-items: center; gap: 8px; min-width: 0; position: relative;
    text-decoration: none; border-radius: 8px; padding: 3px 4px; margin: -3px -4px;
    transition: background var(--dur-fast) var(--ease); }
  .wk-ev:hover { background: color-mix(in srgb, var(--nn-cyan) 8%, transparent); }
  .wk-ev:hover .wk-name { color: var(--nn-cyan); }
  .wk-av { width: 22px; height: 22px; border-radius: 99px; flex: none; color: #fff;
    font: 600 9px var(--font-sans); display: grid; place-items: center; }
  .wk-txt { min-width: 0; display: flex; flex-direction: column; }
  .wk-name { font: 500 11.5px var(--font-sans); color: var(--nb-teal); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    transition: color var(--dur-fast) var(--ease); }
  .wk-occ { font: 400 10px var(--font-sans); color: var(--nb-gray-300); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wk-hol { display: none; }
  .wk-ev-hol { cursor: default; }
  .wk-ev-hol:hover { background: none; }
  .wk-av-hol { background: color-mix(in srgb, var(--nb-orange) 14%, transparent); color: var(--nb-orange); }
  .wk-quiet { font: 400 11px var(--font-sans); color: var(--nn-line-2); }

  /* New faces tile */
  .sf-faces { display: flex; flex-direction: column; gap: 4px; }
  .sf-face-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; margin: 0 -8px;
    border-radius: 10px; text-decoration: none; cursor: pointer;
    transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
  .sf-face-row:hover { background: var(--bg-subtle); transform: translateX(2px); }
  .sf-face-row:hover .sf-face-txt strong { color: var(--nn-cyan); }
  .sf-face-row .sf-av { width: 30px; height: 30px; margin: 0; border: none; }
  .sf-face-txt { font: 400 12.5px var(--font-sans); color: var(--nn-body); line-height: 1.3; min-width: 0; }
  .sf-face-txt strong { display: block; font: 600 13px var(--font-sans); color: var(--nb-teal);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color var(--dur-fast) var(--ease); }
  .sf-face-when { margin-left: auto; font: 500 10.5px var(--font-sans); color: var(--nb-gray-300); white-space: nowrap; }

  /* New starters — contact-card carousel */
  .sf-tile-faces { display: flex; flex-direction: column; }
  .sf-tile-faces .sf-faces { flex: 1; min-height: 0; gap: 0; }
  .nsc { flex: 1; display: flex; flex-direction: column; min-width: 0; }
  .nsc-stage { position: relative; flex: 1; display: flex; min-height: var(--nnw-min-h, 190px);
    border-radius: 14px; overflow: hidden;
    background: linear-gradient(160deg, #fbfcfc 0%, var(--bg-subtle) 100%);
    border: 1px solid color-mix(in srgb, var(--nn-line) 65%, transparent);
    transition: border-color var(--dur-fast) var(--ease); }
  .sf-tile-faces:hover .nsc-stage { border-color: color-mix(in srgb, var(--nb-cyan) 30%, transparent); }
  .nsc-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image: radial-gradient(circle at 1px 1px, var(--nn-line) 1px, transparent 0);
    background-size: 18px 18px; }
  .nsc-rail { position: relative; flex: 1; display: flex; align-items: center;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .nsc-rail::-webkit-scrollbar { display: none; }
  .nsc-card { flex: 0 0 100%; min-width: 100%; scroll-snap-align: start;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 20px 26px; text-decoration: none; }
  .nsp-plate { position: relative; width: min(100%, 360px); display: flex; flex-direction: column;
    gap: 10px; padding: 14px 16px 12px; border-radius: 16px; background: #fff;
    box-shadow: 0 1px 2px rgba(0,39,51,.05), 0 16px 30px -18px rgba(0,39,51,.5);
    transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
  .sf-tile-faces:hover .nsp-plate { transform: translateY(-3px);
    box-shadow: 0 1px 2px rgba(0,39,51,.05), 0 22px 36px -20px rgba(0,39,51,.55); }
  .nsp-head { display: flex; align-items: center; gap: 15px; min-width: 0; }
  .sd-av--nsc { width: 60px; height: 60px; font-size: 20px; font-weight: 300; }
  .nsc-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .nsc-nm { font: 500 18px/1.25 var(--font-sans); letter-spacing: -.02em; color: var(--nn-ink);
    transition: color var(--dur-fast) var(--ease); }
  .nsc-card:hover .nsc-nm { color: var(--nn-cyan); }
  .nsc-role { font: 400 13px/1.4 var(--font-sans); color: var(--nn-body); text-wrap: pretty; }
  .nsp-stamp { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
  .nsp-mark { height: 19px; width: auto; opacity: .9; }
  .nsc-when { font: 400 10.5px var(--font-sans); color: var(--nb-gray-300); white-space: nowrap; }
  .nsp-foot { display: flex; align-items: center; gap: 12px; padding-top: 11px;
    border-top: 1px solid color-mix(in srgb, var(--nn-line) 70%, transparent); }
  .nsc-dept { font: 500 9.5px/1.4 var(--font-sans); letter-spacing: .1em; text-transform: uppercase;
    color: var(--nb-gray-300); min-width: 0; }
  .nsp-flag { flex: none; width: 15px; height: 11px; border-radius: 2px; object-fit: cover;
    box-shadow: 0 0 0 1px rgba(0,39,51,.12); }
  .nsp-slack { margin-left: auto; flex: none; width: 28px; height: 28px; display: grid;
    place-items: center; border-radius: 8px; cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--nn-line) 80%, transparent); background: #fff;
    transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
  .nsp-slack:hover { border-color: color-mix(in srgb, var(--nb-cyan) 40%, transparent); transform: translateY(-1px); }
  .nsp-slack img { width: 15px; height: 15px; display: block; }
  .nsc-foot { display: none; }
  .nsc-dots { display: flex; align-items: center; gap: 5px; margin-right: auto; }
  .nsc-dot { height: 6px; width: 6px; padding: 0; border: none; border-radius: 999px;
    background: var(--nn-line); cursor: pointer;
    transition: width .35s var(--ease), background .35s var(--ease); }
  .nsc-dot.is-on { width: 18px; background: var(--nn-cyan); }
  .nsc-arw { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 28px; height: 28px; display: grid; place-items: center; padding: 0;
    border: 1px solid var(--nn-line); border-radius: 99px; background: var(--nn-card);
    color: var(--nn-body); cursor: pointer; opacity: 0;
    box-shadow: 0 1px 2px rgba(0,39,51,.05), 0 10px 20px -14px rgba(0,39,51,.5);
    transition: opacity var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
      color var(--dur-fast) var(--ease); }
  .nsc-arw-prev { left: 10px; }
  .nsc-arw-next { right: 10px; }
  .sf-tile-faces:hover .nsc-arw, .nsc-arw:focus-visible { opacity: 1; }
  @media (hover: none) { .nsc-arw { opacity: 1; } }
  .nsc-arw svg { width: 14px; height: 14px; }
  .nsc-arw:hover { border-color: var(--nn-cyan); color: var(--nn-cyan); }

  /* Popular guides — a ranked list, quieter than the rail */
  .sf-pop { display: flex; flex-direction: column; gap: 2px; }
  .sf-pop-row { display: flex; align-items: baseline; gap: 12px; padding: 8px 9px; margin: 0 -9px;
    border-radius: 10px; text-decoration: none; transition: background var(--dur-fast) var(--ease); }
  .sf-pop-row:hover { background: var(--bg-subtle); }
  .sf-pop-row:hover .sf-pop-t { color: var(--nn-cyan); }
  .sf-pop-n { flex: none; width: 16px; font: 600 12px var(--font-sans); color: var(--nn-line-2); }
  .sf-pop-t { flex: 1; min-width: 0; font: 500 13.5px/1.4 var(--font-sans); color: var(--nb-teal);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    transition: color var(--dur-fast) var(--ease); }
  .sf-pop-v { flex: none; font: 500 11px var(--font-sans); color: var(--nb-gray-300); }

  /* Staff directory teaser — a small org tree that links through */
  .sf-tree { display: flex; flex-direction: column; align-items: center; padding: 4px 0 2px;
    text-decoration: none; cursor: pointer; }
  .sf-tree-node { display: flex; flex-direction: column; align-items: center; gap: 5px; position: relative; }
  .sf-tree-av { border-radius: 999px; color: #fff; display: grid; place-items: center;
    font: 700 12px var(--font-sans); border: 2px solid #fff; position: relative; overflow: hidden;
    box-shadow: 0 2px 8px -3px rgba(0,39,51,.35); transition: transform .3s var(--ease); }
  .sf-tree-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .sf-tree-lead .sf-tree-av { width: 46px; height: 46px; font-size: 14px; }
  .sf-tree-name { font: 600 11.5px var(--font-sans); color: var(--nb-teal); white-space: nowrap; }
  .sf-tree-role { font: 400 10.5px var(--font-sans); color: var(--nb-gray-300); white-space: nowrap;
    max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
  /* Stem from the leader; children sit in equal grid cells so the elbow ends
     land exactly on the first and last avatar centres. */
  .sf-tree-links { width: 100%; height: 12px; position: relative; }
  .sf-tree-links::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 12px;
    background: var(--nn-line-2); }
  .sf-tree-row { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); width: 100%;
    position: relative; padding-top: 14px; }
  .sf-tree-row::before { content: ""; position: absolute; top: 0; height: 1px;
    left: calc(50% / var(--n, 4)); right: calc(50% / var(--n, 4)); background: var(--nn-line-2); }
  .sf-tree-row .sf-tree-node::before { content: ""; position: absolute; top: -14px; left: 50%;
    width: 1px; height: 14px; background: var(--nn-line-2); }
  .sf-tree-row .sf-tree-av { width: 34px; height: 34px; font-size: 11px; }
  .sf-tree-more { display: flex; align-items: center; margin-top: 18px; }
  .sf-tree-more .sf-tree-av { width: 26px; height: 26px; font-size: 9px; margin-left: -8px; }
  .sf-tree-more .sf-tree-av:first-child { margin-left: 0; }
  .sf-tree-count { margin-left: 10px; font: 400 12.5px var(--font-sans); color: var(--nn-body); }
  .sf-tile-tree:hover .sf-tree-lead .sf-tree-av { transform: translateY(-3px); }

  /* People teaser — an illustrative, static graphic (no live data) */
  .sf-people-art { display: block; position: relative; flex: 1; min-height: 196px; border-radius: 14px;
    background: linear-gradient(160deg, #fbfcfc 0%, var(--bg-subtle) 100%);
    border: 1px solid color-mix(in srgb, var(--nn-line) 65%, transparent);
    overflow: hidden; text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease); }
  .sf-tile-tree:hover .sf-people-art { border-color: color-mix(in srgb, var(--nb-cyan) 34%, transparent); }
  .sf-pa-card { position: absolute; display: flex; align-items: center; gap: 9px;
    background: #fff; border-radius: 12px; padding: 9px 12px;
    box-shadow: 0 1px 2px rgba(0,39,51,.05), 0 10px 22px -18px rgba(0,39,51,.55);
    transition: transform .45s var(--ease); }
  .sf-pa-dot { width: 26px; height: 26px; border-radius: 999px; background: var(--nn-line); flex: none;
    display: grid; place-items: center; color: #fff; font: 600 9.5px var(--font-sans); letter-spacing: .02em;
    overflow: hidden; }
  /* Replaces the initials once the staff photo has decoded; inherits the dot's circle so
     it works at both the 26px and the 32px hero size. */
  .sf-pa-photo { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
  .sf-pa-lines { display: flex; flex-direction: column; gap: 1px; }
  .sf-pa-lines b { font: 600 12px var(--font-sans); color: var(--nn-ink); white-space: nowrap;
    max-width: 132px; overflow: hidden; text-overflow: ellipsis; }
  .sf-pa-lines i { font: 400 10.5px var(--font-sans); font-style: normal; color: var(--nb-gray-400);
    white-space: nowrap; max-width: 132px; overflow: hidden; text-overflow: ellipsis; }
  .sf-pa-1 { left: 3%; top: 5%; transform: rotate(-1.5deg); }
  .sf-pa-2 { left: 6%; bottom: 6%; transform: rotate(1.5deg); }
  .sf-pa-3 { right: 3%; bottom: 5%; transform: rotate(1deg); }
  .sf-pa-hero { left: 50%; top: 50%; margin: -28px 0 0 -84px; padding: 11px 14px;
    box-shadow: 0 2px 4px rgba(0,39,51,.06), 0 18px 34px -20px rgba(0,39,51,.5); }
  .sf-pa-hero .sf-pa-dot { width: 32px; height: 32px; font-size: 11px; }
  .sf-pa-hero .sf-pa-lines b { font-size: 13px; max-width: 168px; }
  .sf-pa-hero .sf-pa-lines i { max-width: 168px; }
  .sf-pa-grid { position: absolute; inset: 0; opacity: .5;
    background-image: radial-gradient(circle at 1px 1px, var(--nn-line) 1px, transparent 0);
    background-size: 18px 18px; }
  .sf-tile-tree:hover .sf-pa-1 { transform: rotate(-1.5deg) translate(-3px, -3px); }
  .sf-tile-tree:hover .sf-pa-2 { transform: rotate(1.5deg) translate(4px, -2px); }
  .sf-tile-tree:hover .sf-pa-3 { transform: rotate(1deg) translate(-2px, 4px); }
  .sf-tile-tree:hover .sf-pa-hero { transform: translateY(-3px); }
  @media (hover: none) {
    .sf-tile-tree:hover .sf-pa-1, .sf-tile-tree:hover .sf-pa-2,
    .sf-tile-tree:hover .sf-pa-3, .sf-tile-tree:hover .sf-pa-hero { transform: none; }
    .sf-pa-1 { transform: rotate(-1.5deg) translate(-3px, -3px); }
    .sf-pa-2 { transform: rotate(1.5deg) translate(4px, -2px); }
    .sf-pa-3 { transform: rotate(1deg) translate(-2px, 4px); }
  }
  /* Caption lives under the art, so nothing overlaps the cards */
  .sf-pa-cta { display: block; margin-top: 12px; font: 500 12.5px var(--font-sans);
    color: var(--nn-body); text-decoration: none; }
  .sf-pa-cta:hover { color: var(--nb-teal); }

  /* Apps teaser — a mosaic of real app icons, distinct from the People card art */
  .sf-apps-art { flex: 1; min-height: 166px; max-height: 166px; display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fill, 78px); justify-content: space-between;
    align-content: center; border-radius: 14px; text-decoration: none; }
  .sf-app-cell { width: 78px; height: 78px; border-radius: 12px; background: #fff;
    border: 1px solid color-mix(in srgb, var(--nn-line) 70%, transparent);
    display: grid; place-items: center; overflow: hidden; position: relative;
    transition: transform .3s var(--ease), border-color .3s var(--ease); }
  .sf-app-cell img { width: 100%; height: 100%; object-fit: cover; }
  .sf-app-cell span { font: 700 13px var(--font-sans); color: var(--nn-cyan); }
  .sf-app-more { background: var(--nb-cyan-tint); border-color: transparent;
    font: 600 12px var(--font-sans); color: var(--nn-cyan); }
  .sf-tile-apps:hover .sf-app-cell { border-color: color-mix(in srgb, var(--nn-cyan) 30%, transparent); }
  .sf-tile-apps:hover .sf-app-cell:nth-child(2n) { transform: translateY(-3px); }
  .sf-tile-apps:hover .sf-app-cell:nth-child(2n+1) { transform: translateY(3px); }
  @media (hover: none) {
    .sf-tile-apps:hover .sf-app-cell { transform: none; border-color: color-mix(in srgb, var(--nn-line) 70%, transparent); }
  }

  /* ===== Quick-link tiles (Vacancies, Targets, Training, IT, Absence, Marketing) =====
     Deliberately unequal spans so the block reads as a bento rather than a 3×2
     grid, and every panel shows real, legible content instead of grey skeletons. */
  .sf-tile-ql { display: flex; flex-direction: column; }
  /* Two tighter rows, each totalling 12 so no tile leaves a dead column beside
     it, with unequal spans for bento rhythm: 4+4+4, then 4+5+3. Widths follow the
     content — the absence numbers and keypad need the most, the marketing fan the
     least. Stages are shorter here than in the catalogue's default. */
  /* Row 2 sits between New starters (order 3) and People (order 5), so targets and
     training take the width People leaves — the deck and the path both want it. */
  /* Row 1: apps cloud, New starters, Support. Row 2: People, targets, training.
     Row 3: absence, vacancies, marketing. Row 4: Ask the Execs. */
  .sf-tile-itsupport { grid-column: span 4; order: 3; }
  .sf-tile-targets   { grid-column: span 4; order: 4; }
  .sf-tile-training  { grid-column: span 4; order: 4; }
  .sf-tile-absence   { grid-column: span 3; order: 11; }
  .sf-tile-vacancies { grid-column: span 3; order: 12; }
  .sf-tile-marketing { grid-column: span 3; order: 13; }
  /* Both Ideas variants take the slot Vacancies holds open, so the bottom row stays
     four across. The embed needs real vertical room, so it spans two grid rows rather
     than stretching the one it is in — its neighbours keep their own height. The
     teaser is native content and needs no extra room. */
  .sf-tile-ideas       { grid-column: span 4; grid-row: span 2; order: 12; }
  .sf-tile-ideasteaser { grid-column: span 3; order: 12; }
  .sf-tile-ql { --nnw-min-h: 150px; }
  .sf-tile-tree .sf-people-art { min-height: 150px; }
  .sf-tile-apps .nnw-cloud { min-height: 190px; }
  .sf-tile-faces .nsc-card { padding-top: 14px; padding-bottom: 14px; }

  /* Every quick-link tile is a teaser, not a report: a soft stage with floating
     objects that shift under the cursor, and one line saying where it goes. */
  .sf-tile-vacancies { --ql-accent: #00a9ce; }
  .sf-tile-targets   { --ql-accent: #b4458d; }
  .sf-tile-training  { --ql-accent: #005567; }
  .sf-tile-itsupport { --ql-accent: #e87722; }
  .sf-tile-absence   { --ql-accent: #005567; }
  .sf-tile-marketing { --ql-accent: #64ccc9; }
  .sf-tile-execs     { --ql-accent: #b4458d; }

  .ql-stage { position: relative; display: block; flex: 1; min-height: var(--nnw-min-h, 190px); border-radius: 14px;
    overflow: hidden; text-decoration: none;
    background: linear-gradient(160deg, #fbfcfc 0%, var(--bg-subtle) 100%);
    border: 1px solid color-mix(in srgb, var(--nn-line) 65%, transparent);
    transition: border-color var(--dur-fast) var(--ease); }
  .sf-tile-ql:hover .ql-stage { border-color: color-mix(in srgb, var(--ql-accent) 34%, transparent); }
  .ql-dots, .ql-glow { position: absolute; pointer-events: none; }
  .ql-dots { inset: 0; opacity: .5;
    background-image: radial-gradient(circle at 1px 1px, var(--nn-line) 1px, transparent 0);
    background-size: 18px 18px; }
  .ql-glow { width: 250px; height: 250px; right: -76px; bottom: -100px; border-radius: 999px;
    background: radial-gradient(circle, var(--ql-accent) 0%, transparent 68%); opacity: .2;
    transition: transform .55s var(--ease), opacity .55s var(--ease); }
  .sf-tile-ql:hover .ql-glow { transform: scale(1.16) translate(-10px, -10px); opacity: .3; }

  .ql-card, .ql-pin { position: absolute; background: #fff; border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0,39,51,.05), 0 12px 26px -18px rgba(0,39,51,.55);
    transition: transform .45s var(--ease); }
  .ql-pin { display: flex; align-items: center; gap: 9px; border-radius: 999px; padding: 6px 14px 6px 6px;
    font: 600 12px var(--font-sans); color: var(--nn-ink); white-space: nowrap; }
  .ql-badge { width: 26px; height: 26px; border-radius: 999px; flex: none; display: grid; place-items: center;
    background: var(--ql-accent); color: #fff; }
  .ql-badge svg { width: 14px; height: 14px; }
  .ql-lines { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .ql-lines b { font: 600 13px var(--font-sans); color: var(--nn-ink); white-space: nowrap; }
  .ql-lines i { font: 400 11px var(--font-sans); font-style: normal; color: var(--nb-gray-400); white-space: nowrap; }

  /* Vacancies — a seating grid with the open seats waiting to be filled */
  .qlv-wrap { position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 15px; }
  .qlv-seats { display: grid; grid-template-columns: repeat(3, 54px); gap: 13px; }
  .qlv-seat { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
    background: linear-gradient(160deg, #ffffff 0%, #eaeff0 100%); color: #b7c1c4;
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 8px 18px -14px rgba(0,39,51,.55),
      0 0 0 1px rgba(0,39,51,.05);
    transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
  .qlv-seat svg { width: 21px; height: 21px; }
  .qlv-seat.is-open { background: color-mix(in srgb, var(--ql-accent) 9%, #fff); color: var(--ql-accent);
    box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--ql-accent) 45%, transparent) inset; }
  .sf-tile-ql:hover .qlv-seat.is-open { transform: translateY(-5px);
    box-shadow: 0 0 0 1.5px var(--ql-accent) inset,
      0 14px 24px -14px color-mix(in srgb, var(--ql-accent) 75%, transparent); }
  .sf-tile-ql:hover .qlv-seat.is-open:last-child { transition-delay: .07s; }
  .qlv-cap { font: 600 12px var(--font-sans); color: var(--nn-body); }

  /* Company targets — the VPMOM deck, as two stacked slides */
  .qlt-back { left: 50%; top: 50%; width: 226px; height: 118px; margin: 0;
    background: color-mix(in srgb, var(--ql-accent) 12%, #fff);
    transform: translate(-46%, -56%) rotate(-4deg); }
  .qlt-front { left: 50%; top: 50%; width: 234px; height: 122px; margin: 0;
    transform: translate(-54%, -44%);
    padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
  .qlt-front > b { font: 600 12.5px var(--font-sans); color: var(--nn-ink); }
  .qlt-rows { display: flex; flex-direction: column; gap: 8px; }
  .qlt-rows i { display: block; height: 7px; border-radius: 999px; }
  .sf-tile-ql:hover .qlt-back { transform: translate(-52%, -62%) rotate(-8deg); }
  .sf-tile-ql:hover .qlt-front { transform: translate(-54%, -50%); }
  .qlt-p { left: 14px; bottom: 14px; transform: rotate(-1.5deg); }
  /* Narrow stages keep the deck centred, just smaller. */
  .sf-tile-ql:hover .qlt-p { transform: rotate(-1.5deg) translateY(-5px); }

  /* Training — a path of steps that ends in the cap */
  .qlr-path { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 24px; }
  .qlr-path::before { content: ''; position: absolute; left: 20%; right: 20%; top: 50%;
    border-top: 1.5px dashed color-mix(in srgb, var(--nn-line) 95%, transparent); }
  .qlr-node { position: relative; width: 46px; height: 46px; border-radius: 999px; display: grid; place-items: center;
    background: linear-gradient(160deg, #ffffff 0%, #eaeff0 100%); color: #b7c1c4;
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 8px 18px -14px rgba(0,39,51,.55),
      0 0 0 1px rgba(0,39,51,.05);
    transition: transform .45s var(--ease), color .45s var(--ease); }
  .qlr-node svg { width: 20px; height: 20px; }
  .qlr-node.is-video { border-radius: 16px; }
  .qlr-node.is-video svg { width: 25px; height: 25px; }
  .sf-tile-ql:hover .qlr-node.is-video { color: #E87722; }
  .qlr-node.is-end { width: 60px; height: 60px; color: #fff;
    background: linear-gradient(150deg, #00A9CE 0%, #005567 100%);
    box-shadow: 0 14px 26px -12px rgba(0,85,103,.7); }
  .qlr-node.is-end svg { width: 26px; height: 26px; }
  .sf-tile-ql:hover .qlr-node { transform: translateY(-5px); color: var(--nn-cyan); }
  .sf-tile-ql:hover .qlr-node.is-end { color: #fff; }
  .sf-tile-ql:hover .qlr-node:nth-child(2) { transition-delay: .06s; }
  .sf-tile-ql:hover .qlr-node:nth-child(3) { transition-delay: .12s; }
  .sf-tile-ql:hover .qlr-node:nth-child(4) { transition-delay: .18s; }

  /* IT support — a real support thread: the ask, the pickup, the resolve */
  .qlh-thread { position: absolute; inset: 0; display: flex; flex-direction: column;
    justify-content: center; gap: 10px; padding: 0 20px 26px; }
  .qlh-msg { display: flex; align-items: flex-start; gap: 9px; max-width: 84%;
    padding: 9px 12px; border-radius: 14px; background: #fff;
    box-shadow: 0 1px 2px rgba(0,39,51,.05), 0 12px 26px -18px rgba(0,39,51,.55);
    transition: transform .45s var(--ease); }
  .qlh-msg.is-out { align-self: flex-end; flex-direction: row-reverse;
    background: color-mix(in srgb, var(--ql-accent) 10%, #fff);
    box-shadow: 0 1px 2px rgba(0,39,51,.05),
      0 12px 26px -18px color-mix(in srgb, var(--ql-accent) 80%, transparent); }
  .qlh-av { flex: none; width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center;
    background: #eef1f2; color: #97a3a7; }
  .qlh-msg.is-out .qlh-av { background: var(--ql-accent); color: #fff; }
  .qlh-av svg { width: 13px; height: 13px; }
  .qlh-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .qlh-msg.is-out .qlh-body { align-items: flex-end; }
  .qlh-body b { font: 500 12.5px var(--font-sans); color: var(--nn-ink); line-height: 1.25; }
  .qlh-body i { font-style: normal; font: 400 10.5px var(--font-sans); color: var(--nb-gray-400); }
  .qlh-typing { display: flex; gap: 4px; padding: 3px 0 1px; }
  .qlh-typing span { width: 5px; height: 5px; border-radius: 999px;
    background: color-mix(in srgb, var(--ql-accent) 55%, transparent); }
  .qlh-resolve { position: absolute; left: 20px; bottom: 14px; display: flex; align-items: center; gap: 7px;
    padding: 5px 12px 5px 6px; border-radius: 999px; background: #fff;
    font: 600 11px var(--font-sans); color: var(--nn-ink); white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0,39,51,.05), 0 12px 24px -16px rgba(0,39,51,.55);
    transition: transform .45s var(--ease); }
  .qlh-resolve em { font-style: normal; width: 18px; height: 18px; border-radius: 999px; display: grid;
    place-items: center; background: var(--ql-accent); color: #fff; }
  .qlh-resolve svg { width: 11px; height: 11px; }
  .sf-tile-ql:hover .qlh-msg.is-in { transform: translateX(-6px); }
  .sf-tile-ql:hover .qlh-msg.is-out { transform: translateX(6px); transition-delay: .06s; }
  .sf-tile-ql:hover .qlh-resolve { transform: translateY(-4px); transition-delay: .12s; }

  /* Support, live variation — bottom-anchored feed; new rows expand and
     push the thread up. Bubbles reserve two lines so the rhythm never jumps. */
  .qlh-live { justify-content: flex-end; overflow: hidden; padding: 0 20px 14px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26px);
    mask-image: linear-gradient(180deg, transparent 0, #000 26px); }
  .qlh-feed { display: flex; flex-direction: column; justify-content: flex-end; }
  .qlh-row { display: grid; grid-template-rows: 0fr; opacity: 0;
    transition: grid-template-rows .55s var(--ease), opacity .4s var(--ease); }
  .qlh-row.is-on { grid-template-rows: 1fr; opacity: 1; }
  .qlh-row-in { min-height: 0; overflow: hidden; display: flex; padding-top: 9px; }
  .qlh-row.is-out-row .qlh-row-in { justify-content: flex-end; }
  .qlh-row .qlh-msg { transform: translateY(7px); transition: transform .5s var(--ease); }
  .qlh-row.is-on .qlh-msg { transform: none; }
  .qlh-live .qlh-body { min-height: 32px; justify-content: center; }
  .ql-stage:has(.qlh-live) .qlh-resolve { display: none; }
  .qlh-live .qlh-msg.is-out .qlh-body { gap: 3px; }
  .qlh-live .qlh-typing span { animation: qlh-blink 1.4s var(--ease) infinite; }
  .qlh-live .qlh-typing span:nth-child(2) { animation-delay: .18s; }
  .qlh-live .qlh-typing span:nth-child(3) { animation-delay: .36s; }
  @keyframes qlh-blink { 0%, 60%, 100% { opacity: .35; } 30% { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) {
    .qlh-row { transition: none; }
    .qlh-live .qlh-typing span { animation: none; }
  }

  /* Absence — the three numbers, read plainly, beside a lit call key */
  .qla-wrap { position: absolute; inset: 0; display: flex; align-items: center; gap: 20px; padding: 0 22px; }
  .qla-list { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
  .qla-line { display: flex; flex-direction: column; gap: 1px; text-decoration: none;
    border-radius: 8px; padding: 2px 6px; margin-left: -6px; width: fit-content;
    transition: background var(--dur-fast) var(--ease); }
  .qla-line:hover { background: color-mix(in srgb, var(--ql-accent) 9%, transparent); }
  .qla-line em { font-style: normal; font: 600 10.5px var(--font-sans); letter-spacing: .1em;
    text-transform: uppercase; color: var(--nb-gray-400); }
  .qla-line b { font: 600 14px var(--font-sans); color: var(--nn-ink); letter-spacing: .01em;
    transition: color var(--dur-fast) var(--ease); }
  .qla-line:hover b { color: var(--ql-accent); }
  .qla-cal { flex: none; width: 96px; border-radius: 14px; overflow: hidden; background: #fff;
    box-shadow: 0 1px 2px rgba(0,39,51,.05), 0 14px 28px -18px rgba(0,39,51,.55);
    transition: transform .45s var(--ease); }
  .sf-tile-ql:hover .qla-cal { transform: translateY(-5px); }
  .qla-cal-top { height: 20px; display: flex; align-items: center; justify-content: center; gap: 5px;
    background: var(--ql-accent); }
  .qla-cal-top i { width: 4px; height: 4px; border-radius: 99px; background: rgba(255,255,255,.75); }
  .qla-cal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 10px; }
  .qla-cal-grid i { height: 9px; border-radius: 3px; background: var(--nn-line); }
  /* Two days crossed out — the absence itself, read at a glance. */
  .qla-cal-grid i.is-off { position: relative; background: color-mix(in srgb, #F8485E 14%, #fff); }
  .qla-cal-grid i.is-off::before, .qla-cal-grid i.is-off::after { content: ""; position: absolute;
    left: 50%; top: 50%; width: 9px; height: 1.6px; border-radius: 2px; background: #F8485E; }
  .qla-cal-grid i.is-off::before { transform: translate(-50%, -50%) rotate(45deg); }
  .qla-cal-grid i.is-off::after { transform: translate(-50%, -50%) rotate(-45deg); }
  .qla-pad { flex: none; display: grid; grid-template-columns: repeat(3, 22px); gap: 10px; padding: 15px;
    border-radius: 19px; background: linear-gradient(160deg, #ffffff 0%, #eaeff0 100%);
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 14px 28px -16px rgba(0,39,51,.55),
      0 0 0 1px rgba(0,39,51,.05); }
  .qla-key { width: 22px; height: 22px; border-radius: 999px; background: #fff;
    box-shadow: 0 0 0 1px rgba(0,39,51,.07), 0 2px 4px -2px rgba(0,39,51,.3); }
  .qla-key.is-call { grid-column: 2; display: grid; place-items: center; color: #fff;
    background: var(--ql-accent);
    box-shadow: 0 8px 16px -6px color-mix(in srgb, var(--ql-accent) 85%, transparent);
    transition: transform .45s var(--ease); }
  .qla-key.is-call svg { width: 12px; height: 12px; }
  .sf-tile-ql:hover .qla-key.is-call { transform: scale(1.2); }

  /* Marketing — a fan of brand cards behind the Drive pin */
  .qlm-sw { position: absolute; left: 50%; top: 46%; width: 88px; height: 108px; border-radius: 13px;
    margin: -54px 0 0 -44px; box-shadow: 0 2px 6px rgba(0,39,51,.10), 0 16px 30px -20px rgba(0,39,51,.6);
    transition: transform .45s var(--ease); }
  .qlm-1 { transform: rotate(-13deg) translateX(-58px); }
  .qlm-3 { transform: rotate(13deg) translateX(58px); }
  .sf-tile-ql:hover .qlm-1 { transform: rotate(-18deg) translate(-70px, -6px); }
  .sf-tile-ql:hover .qlm-2 { transform: translateY(-7px); }
  .sf-tile-ql:hover .qlm-3 { transform: rotate(18deg) translate(70px, -6px); }
  .qlm-p { left: 50%; bottom: 14px; transform: translateX(-50%); }
  .sf-tile-ql:hover .qlm-p { transform: translateX(-50%) translateY(-4px); }

  @media (hover: none) {
    .sf-tile-ql:hover .ql-card, .sf-tile-ql:hover .ql-pin,
    .sf-tile-ql:hover .qlv-seat, .sf-tile-ql:hover .qlr-node,
    .sf-tile-ql:hover .qlh-msg, .sf-tile-ql:hover .qlh-resolve,
    .sf-tile-ql:hover .qla-key.is-call,
    .sf-tile-ql:hover .qlm-sw { transform: none; }
    .qlt-back { transform: translate(-46%, -56%) rotate(-4deg); }
    .qlm-1 { transform: rotate(-13deg) translateX(-58px); }
    .qlm-3 { transform: rotate(13deg) translateX(58px); }
    .qlm-p { transform: translateX(-50%); }
  }

  @media (max-width: 1000px) {
    .sf-tile-guides, .sf-tile-week, .sf-tile-faces,
    .sf-tile-popular, .sf-tile-tree, .sf-tile-apps { grid-column: span 12; }
    .sf-tile-apps { grid-row: auto; }
    .sf-tile-vacancies, .sf-tile-targets, .sf-tile-training, .sf-tile-execs,
    .sf-tile-ideas, .sf-tile-ideasteaser,
    .sf-tile-itsupport, .sf-tile-absence, .sf-tile-marketing { grid-column: span 6; }
    .sf-tile-ideas { grid-row: auto; }
    .sf-tile-ql { --nnw-min-h: 170px; }
  }
  @media (max-width: 720px) {
    .sf-bento { gap: 12px; }
    .sf-tile { padding: 16px 16px 18px; }
    .sf-tile-vacancies, .sf-tile-targets, .sf-tile-training, .sf-tile-execs,
    .sf-tile-ideas, .sf-tile-ideasteaser,
    .sf-tile-itsupport, .sf-tile-absence, .sf-tile-marketing { grid-column: span 12; }
    .ql-cats { grid-template-columns: 1fr; }
    .qlh-live { padding: 0 13px 13px; }
    .qlh-live .qlh-row-in { padding-top: 7px; }
    .qlh-live .qlh-msg { padding: 8px 10px; gap: 7px; }
    .qlh-live .qlh-body b { font-size: 12px; }
  }

  /* A day column needs ~150px to hold a full name and its occasion line; below
     that the calendar becomes a vertical agenda instead of shrinking to mush. */
  @container (max-width: 1120px) {
    .wk-grid { grid-template-columns: 1fr; }
    .wk-day { flex-direction: row; align-items: flex-start; gap: 14px; min-height: 0;
      padding: 11px 10px; border-left: none; border-radius: 10px;
      border-top: 1px solid var(--nn-line); }
    .wk-day:first-child { border-top: none; }
    .wk-day.is-empty { display: none; }
    .wk-head { flex: 0 0 58px; flex-direction: column; gap: 1px; align-items: flex-start; }
    .wk-date { font-size: 15px; }
    .wk-body { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px 22px; flex: 1; min-width: 0; }
    .wk-name, .wk-occ { white-space: nowrap; }
  }
  @container (max-width: 560px) {
    .wk-body { flex-direction: column; gap: 9px; }
  }
  .wk-body { display: contents; }
  @container (max-width: 1120px) { .wk-body { display: flex; } }

  
/* ===== Latest guides rail ===== */
  .sf-rail-wrap { padding: 6px 0 0; }
  .sf-rail { display: flex; align-items: stretch; gap: 14px; overflow-x: auto; padding: 4px 4px 14px; scroll-snap-type: x proximity; }
  .sf-rail::-webkit-scrollbar { height: 7px; }
  .sf-rail::-webkit-scrollbar-thumb { background: var(--nn-line-2); border-radius: 99px; }
  /* Same anatomy as the All guides grid tile: image on top at 21/9, then dept +
     updated, title, description with More, and tag chips pinned to the bottom. */
  .sf-scroll-card { flex: 0 0 274px; scroll-snap-align: start; background: var(--nn-card);
    border: 1px solid var(--nn-line); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none;
    display: flex; flex-direction: column; position: relative;
    transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
  .sf-scroll-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: transparent; }
  /* The tile is a teaser, so the image is capped — the 21/9 ratio still governs
     narrow cards, but it never grows tall enough to push the widgets below out
     of sight. */
  .sf-scroll-thumb { position: relative; display: block; aspect-ratio: 21 / 9; max-height: 78px;
    background: var(--grad-deep, linear-gradient(180deg,#002733 0%,#005567 100%)); overflow: hidden; }
  /* Views ride on the thumb's top-right, as in the All guides grid. */
  .sf-scroll-views { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 999px; background: rgba(0,39,51,.58); backdrop-filter: blur(4px);
    font: 600 10.5px var(--font-sans); color: #fff; }
  .sf-scroll-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .sf-scroll-thumb-ph { width: 100%; height: 100%; background: repeating-linear-gradient(45deg, var(--bg-subtle) 0 10px, #fff 10px 20px); }
  .sf-scroll-body { padding: 10px 12px 11px; display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
  .sf-scroll-dept { flex: 1 1 auto; min-width: 0; font: 500 11.5px var(--font-sans); color: var(--nn-cyan);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none;
    transition: color .14s var(--ease); }
  .sf-scroll-dept:hover { color: var(--nb-teal); text-decoration: underline; }
  .sf-scroll-tags { margin-top: auto; padding-top: 7px; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-height: 20px; }
  .sf-scroll-tag { padding: 3px 9px; border-radius: 999px; font: 600 9.5px var(--font-sans);
    letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
    background: var(--nb-cyan-tint, color-mix(in srgb, var(--nn-cyan) 12%, transparent)); color: var(--nn-cyan);
    transition: transform .16s var(--ease), box-shadow .16s ease, background .16s ease, color .16s ease; }
  .sf-scroll-tag:hover { transform: translateY(-1.5px) scale(1.05); background: var(--nn-cyan); color: #fff;
    box-shadow: 0 4px 10px -6px rgba(0,39,51,.6); }
  .sf-scroll-tag:active { transform: translateY(0) scale(.97); }
  .sf-scroll-title { font: 600 14.5px/1.35 var(--font-sans); color: var(--nb-teal); text-wrap: pretty;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    transition: color var(--dur-fast) var(--ease); }
  .sf-scroll-card:hover .sf-scroll-title { color: var(--nn-cyan); }
  /* A preview rail, so two lines of description — the rest lives behind More and
     on the All guides page. */
  .sf-scroll-desc { font: 400 12.5px/1.45 var(--font-sans); color: var(--nn-body);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 36px; }
  /* More / Close — the description expands into an overlay, as on All guides. */
  .sf-scroll-descwrap { position: relative; display: block; width: 100%; }
  .sf-scroll-more { position: absolute; right: 0; bottom: 0; padding: 0 1px 0 34px;
    background: linear-gradient(90deg, transparent, var(--nn-card) 34%); border: none; cursor: pointer;
    font: 600 11.5px var(--font-sans); color: var(--nn-cyan); transform-origin: right bottom;
    transition: transform .16s cubic-bezier(.34,1.56,.64,1), color .16s ease; }
  .sf-scroll-more[hidden] { display: none; }
  .sf-scroll-more:hover { transform: scale(1.14); color: var(--nb-teal); }
  .sf-scroll-more:active { transform: scale(1.02); }
  .sf-scroll-overlay { position: absolute; inset: 0; z-index: 30; background: var(--nn-card);
    border: 1px solid var(--nn-cyan); border-radius: var(--radius-lg); padding: 16px;
    display: flex; flex-direction: column; gap: 10px; cursor: pointer; transform-origin: top center; }
  .sf-scroll-overlay[hidden] { display: none; }
  .sf-scroll-odesc { flex: 1; min-height: 0; overflow: auto; font: 400 12.5px/1.6 var(--font-sans); color: var(--nn-body); }
  .sf-scroll-close { display: inline; border: none; background: none; padding: 0;
    font: 600 11.5px var(--font-sans); color: var(--nn-cyan); cursor: pointer; }
  @keyframes nn-expand-in { from { opacity: 0; transform: scaleY(.94); } to { opacity: 1; transform: scaleY(1); } }
  /* Meta sits directly under the image: dept left, updated right, wrapping
     rather than clipping. Matches the All guides card. */
  .sf-scroll-meta { display: flex; flex-wrap: wrap;
    align-items: baseline; gap: 3px 8px; min-width: 0;
    font: 500 11.5px var(--font-sans); color: var(--nb-gray-300); }
  .sf-scroll-date { flex: 0 1 auto; min-width: 0; font: 500 11px var(--font-sans); white-space: nowrap; }

/* Quarter width — the art sheds furniture rather than shrinking it */
@container (max-width: 420px) {
  .ql-stage { min-height: var(--nnw-min-h, 158px); }
  .qlv-seats { grid-template-columns: repeat(3, 42px); gap: 9px; }
  .qlv-seat { width: 42px; height: 42px; border-radius: 13px; }
  .qlv-seat svg { width: 17px; height: 17px; }
  .qlr-path { gap: 12px; }
  .qlr-node { width: 36px; height: 36px; }
  .qlr-node.is-end { width: 46px; height: 46px; }
  .qla-wrap { flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px; padding: 16px 18px; }
  .qla-pad { display: none; }
  .qla-wrap { flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; }
  .qla-cal { width: 74px; }
  .qla-line b { font-size: 13px; }
  .qlt-back { width: 178px; height: 100px; }
  .qlt-front { width: 186px; height: 104px; padding: 12px 13px; }
  .qlh-thread { padding: 0 14px 26px; gap: 8px; }
  .qlh-msg { max-width: 96%; }
  .qlm-1 { transform: rotate(-13deg) translateX(-40px); }
  .qlm-3 { transform: rotate(13deg) translateX(40px); }
  .sf-people-art { min-height: var(--nnw-min-h, 176px); }
  .sf-pa-1 { left: 2%; top: 3%; }
  .sf-pa-2 { left: 2%; bottom: 4%; }
  .sf-pa-3 { display: none; }
  .sf-pa-hero { left: auto; right: 2%; top: 50%; margin: -28px 0 0 0; transform: translateY(-50%); }
  .sf-tile-tree:hover .sf-pa-hero { transform: translateY(-50%) translateY(-3px); }
  .sf-pa-hero { margin: -28px 0 0 -78px; }
  .sf-apps-art { min-height: var(--nnw-min-h, 150px); max-height: none; grid-template-columns: repeat(auto-fill, 62px); }
  .sf-app-cell { width: 62px; height: 62px; }
  .sf-scroll-card { flex: 0 0 216px; }
}


/* ===== Apps — icon cloud (the App Store hero cluster, as a widget) =====
   The stage keeps the App Store's own 344×250 geometry and is scaled to fit,
   so the widget and the hero are the same object at different sizes. */
.nnw-cloud { display: block; position: relative; flex: 1; min-height: var(--nnw-min-h, 260px);
  text-decoration: none; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
  border-radius: 14px; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(160deg, #fbfcfc 0%, var(--bg-subtle) 100%);
  border: 1px solid color-mix(in srgb, var(--nn-line) 65%, transparent); }
/* Same dotted stage as the quick-link widgets */
.nnw-cloud::before { content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, var(--nn-line) 1px, transparent 0);
  background-size: 18px 18px; }
.nnw-cloud-stage { position: absolute; inset: 0; display: block; }
.sf-tile-appscloud:hover .nnw-cloud { border-color: color-mix(in srgb, var(--nb-cyan) 34%, transparent); }
.sf-tile-appscloud { display: flex; flex-direction: column; }

/* ===== Narrow stages (a quick-link tile at ~200px) =====
   Declared last: container queries add no specificity, so these have to follow the
   base art rules to win. The deck and the Drive fan shrink rather than clip. */
@container (max-width: 260px) {
  .qlm-sw { width: 72px; height: 90px; margin: -45px 0 0 -36px; }
  .qlm-1 { transform: rotate(-13deg) translateX(-30px); }
  .qlm-3 { transform: rotate(13deg) translateX(30px); }
  .sf-tile-ql:hover .qlm-1 { transform: rotate(-18deg) translate(-38px, -6px); }
  .sf-tile-ql:hover .qlm-3 { transform: rotate(18deg) translate(38px, -6px); }
  .qlt-back { width: 132px; height: 82px; }
  .qlt-front { width: 140px; height: 86px; padding: 10px 11px; gap: 7px; }
  .qlt-rows { gap: 5px; }
  .qlt-rows i { height: 5px; }
}
@container (max-width: 330px) {
  .qlt-back { width: 156px; height: 92px; }
  .qlt-front { width: 164px; height: 96px; padding: 11px 12px; }
}

/* ===== Ask the Execs =====
   The ask is the object: a question card mid-type, with the leadership team
   waiting under it. Same stage, dots, and lift-on-hover as the other teasers. */
.sf-tile-execs { display: flex; flex-direction: column; }
.qle-wrap { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; padding: 0 20px; }
.qle-ask { display: flex; flex-direction: column; gap: 4px; max-width: 260px; width: 100%;
  padding: 11px 13px 12px; border-radius: 14px; background: #fff;
  box-shadow: 0 1px 2px rgba(0,39,51,.05), 0 14px 28px -18px rgba(0,39,51,.55);
  transition: transform .45s var(--ease); }
.qle-ask em { font-style: normal; font: 600 9.5px var(--font-sans); letter-spacing: .12em;
  text-transform: uppercase; color: var(--nb-gray-400); }
.qle-ask b { display: block; font: 500 13px/1.42 var(--font-sans); color: var(--nn-ink);
  text-wrap: pretty; min-height: 2.84em; }
.qle-ask i { display: inline-block; vertical-align: -2px; margin-left: 2px; }
.qle-ask i { width: 1.5px; height: 14px; background: var(--ql-accent); border-radius: 2px;
  animation: qle-caret 1.1s steps(1) infinite; }
@keyframes qle-caret { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
.qle-panel { display: flex; align-items: center; gap: 8px; padding: 6px 14px;
  border-radius: 999px; background: #fff;
  box-shadow: 0 1px 2px rgba(0,39,51,.05), 0 12px 24px -18px rgba(0,39,51,.55);
  transition: transform .45s var(--ease); }
.qle-lbl { font: 500 11.5px var(--font-sans); color: var(--nn-body); white-space: nowrap; }
.sf-tile-ql:hover .qle-ask { transform: translateY(-5px); }
.sf-tile-ql:hover .qle-panel { transform: translateY(-3px); transition-delay: .06s; }

@container (max-width: 420px) {
  .qle-wrap { gap: 11px; padding: 0 14px; }
  .qle-ask { max-width: none; }
  .qle-ask { padding: 10px 12px 11px; }
  .qle-ask b { font-size: 12.5px; }
  .qle-lbl { font-size: 11px; white-space: normal; }
}
@media (hover: none) {
  .sf-tile-ql:hover .qle-ask, .sf-tile-ql:hover .qle-panel { transform: none; }
}

/* ===== Ideas (Slido) =====
   The live poll, imported from the design project's `ideas` widget. The iframe is
   a third-party document we cannot style, so the tile gives it its own frame and a
   shimmer skeleton to cross-fade out of once the board reports back.

   `color-scheme` is the one lever we have over the board's own theme: Slido offers
   no theme parameter but honours prefers-color-scheme, and an iframe's embedded
   document takes that from this property — so the board follows the Natternet
   toggle instead of the viewer's OS. It is read at load; nn-widgets.js reloads the
   frame on the `nn-theme` event. */
/* ---- live embed (variant: ideas) ----
   The board needs real vertical room, so this tile spans two grid rows rather than
   stretching the row it sits in — its width still matches its neighbours. Height and
   scale of the iframe are owned by fit() in nn-widgets.js; do not set width, height or
   transform here or the measured scale and the stylesheet will fight. */
.sf-tile-ideas { display: flex; flex-direction: column; gap: 12px; }
.nni-frame { position: relative; display: block; flex: 1; min-height: var(--nnw-slido-h, 372px);
  border-radius: 14px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--nn-line) 70%, transparent);
  background: linear-gradient(160deg, #fbfcfc 0%, var(--bg-subtle) 100%);
  transition: border-color var(--dur-fast) var(--ease); }
.sf-tile-ideas:hover .nni-frame { border-color: color-mix(in srgb, var(--nn-cyan) 34%, transparent); }
.nni-embed { position: absolute; top: 0; left: 0; border: 0; display: block;
  transform-origin: top left; opacity: 0; color-scheme: light;
  transition: opacity .5s var(--ease); }
.nni-frame.is-ready .nni-embed { opacity: 1; }
.nni-skel { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px;
  padding: 16px; transition: opacity .35s var(--ease); }
.nni-skel s { display: block; flex: 1; border-radius: 12px; text-decoration: none;
  background: linear-gradient(100deg, color-mix(in srgb, var(--nn-line) 40%, transparent) 0%,
    color-mix(in srgb, var(--nn-line) 75%, transparent) 45%,
    color-mix(in srgb, var(--nn-line) 40%, transparent) 90%);
  background-size: 220% 100%; animation: nni-shim 2.4s linear infinite; }
.nni-skel s:nth-child(2) { animation-delay: .2s; opacity: .8; }
.nni-skel s:nth-child(3) { animation-delay: .4s; opacity: .6; }
.nni-frame.is-ready .nni-skel { opacity: 0; }
@keyframes nni-shim { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@container (max-width: 330px) { .nni-frame { min-height: 340px; } }

/* ---- invitation teaser (variant: ideasteaser) ----
   The card-and-pill idiom Ask the Execs uses: an idea being written, with the upvote
   and reaction affordances that the real board offers under it. Nothing here is data
   — Slido has no read API, so no real idea, name or count may appear outside the
   iframe. --accent keeps the literal brand cyan inside the stage, where the page-wide
   deep-teal override would otherwise flatten it. */
.sf-tile-ideasteaser { display: flex; flex-direction: column; gap: 14px; --accent: #00A9CE; }
/* The column gap already spaces the head from the stage; .sf-tile-head's own
   margin-bottom would double it and make this tile 14px taller than its row-mates. */
.sf-tile-ideasteaser .sf-tile-head { margin-bottom: 0; }

.qli-stage { position: relative; display: block; flex: 1; min-height: var(--nnw-min-h, 158px);
  border-radius: 14px; overflow: hidden; text-decoration: none;
  background: linear-gradient(160deg, #fbfcfc 0%, var(--bg-subtle) 100%);
  border: 1px solid color-mix(in srgb, var(--nn-line) 70%, transparent);
  transition: border-color var(--dur-fast) var(--ease); }
.sf-tile-ideasteaser:hover .qli-stage { border-color: color-mix(in srgb, var(--accent) 34%, transparent); }
.qli-dots { position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--nb-deep) 7%, transparent) 1px, transparent 1px);
  background-size: 16px 16px; }

/* Spacing is deliberately identical to Ask the Execs (.qle-*) so the two tiles line
   up next to each other — same wrap gap and side padding, same card cap and padding,
   same pill. Change them together or they drift apart. */
.qli-wrap { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; padding: 0 20px; }
.qli-card { display: flex; flex-direction: column; gap: 4px; max-width: 260px; width: 100%;
  padding: 11px 13px 12px; border-radius: 14px; background: #fff;
  box-shadow: 0 1px 2px rgba(0,39,51,.05), 0 14px 28px -18px rgba(0,39,51,.55);
  transition: transform .45s var(--ease); }
.qli-card em { font-style: normal; font: 600 9.5px var(--font-sans); letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent); }
/* min-height reserves the two lines the longest prompt needs, so the card holds its
   shape as the prompts crossfade instead of resizing under them. */
.qli-card b { display: block; font: 400 12px/1.45 var(--font-sans); color: var(--nn-ink);
  text-wrap: pretty; min-height: 2.9em;
  transition: opacity .45s var(--ease), transform .45s var(--ease); }
.qli-card b.is-out { opacity: 0; transform: translateY(-5px); }

.qli-foot { display: flex; align-items: center; gap: 10px; padding-top: 6px;
  border-top: 1px solid color-mix(in srgb, var(--nn-line) 55%, transparent); }
.qli-up { display: flex; align-items: center; gap: 4px; margin-right: auto;
  font: 600 10.5px var(--font-sans); color: var(--accent); }
.qli-up svg { width: 11px; height: 11px; }
.qli-react { display: flex; gap: 4px; }
.qli-react s { width: 5px; height: 5px; border-radius: 999px; text-decoration: none;
  background: color-mix(in srgb, var(--nn-line) 85%, transparent);
  transition: background .5s var(--ease); }
.sf-tile-ideasteaser:hover .qli-react s { background: color-mix(in srgb, var(--accent) 45%, transparent); }
.sf-tile-ideasteaser:hover .qli-react s:nth-child(2) { transition-delay: .07s; }
.sf-tile-ideasteaser:hover .qli-react s:nth-child(3) { transition-delay: .14s; }

.qli-panel { display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
  background: #fff; box-shadow: 0 1px 2px rgba(0,39,51,.05), 0 12px 24px -18px rgba(0,39,51,.55);
  transition: transform .45s var(--ease); }
.qli-lbl { font: 500 11.5px var(--font-sans); color: var(--nn-body); white-space: nowrap; }
.sf-tile-ideasteaser:hover .qli-card { transform: translateY(-5px); }
.sf-tile-ideasteaser:hover .qli-panel { transform: translateY(-3px); transition-delay: .06s; }

@container (max-width: 420px) {
  .qli-wrap { gap: 11px; padding: 0 14px; }
  .qli-card { max-width: none; padding: 10px 12px 11px; }
  .qli-lbl { font-size: 11px; white-space: normal; text-align: center; }
}
@container (max-width: 250px) {
  .qli-wrap { padding: 0 11px; gap: 9px; }
  .qli-card { padding: 9px 11px 10px; }
  .qli-panel { padding: 5px 11px; }
  .qli-lbl { font-size: 10.5px; }
}
@media (hover: none) {
  .sf-tile-ideasteaser:hover .qli-card,
  .sf-tile-ideasteaser:hover .qli-panel { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nni-skel s { animation: none; }
  .qli-card, .qli-card b, .qli-panel, .qli-react s { transition: none; }
}

html[data-theme="dark"] .qli-card,
html[data-theme="dark"] .qli-panel { background: var(--nn-field);
  box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 12px 26px -18px rgba(0,0,0,.85); }
html[data-theme="dark"] .qli-dots {
  background-image: radial-gradient(color-mix(in srgb, #fff 8%, transparent) 1px, transparent 1px); }

/* ---- floating island (shared) ----
   The board opens as a large canvas over the page rather than a side drawer, with the
   embed presented as a widget-styled card on that canvas. Slido centres its own
   content to roughly 700px, so a full-bleed frame would be white space either side;
   the card also keeps the board reading as part of Natternet rather than a bare
   third-party page. */
.nnid { position: fixed; inset: 0; z-index: 210; pointer-events: none;
  display: flex; align-items: center; justify-content: center; padding: 4vh 3vw; }
.nnid-veil { position: absolute; inset: 0; background: rgba(0,39,51,.42);
  backdrop-filter: blur(6px); opacity: 0; transition: opacity .26s var(--ease); }
/* Sized to the board, not the screen: Slido centres its own content to roughly
   700px, so a wider island is only empty margin either side. */
.nnid-island { position: relative; z-index: 1;
  width: min(760px, 94vw); height: min(760px, 88vh);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--nn-page); border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--nn-line) 70%, transparent);
  box-shadow: 0 2px 6px rgba(0,39,51,.08), 0 40px 90px -40px rgba(0,39,51,.55);
  opacity: 0; transform: translateY(10px) scale(.985);
  transition: opacity .3s var(--ease), transform .32s cubic-bezier(.2,.8,.25,1); }
.nnid.is-open { pointer-events: auto; }
.nnid.is-open .nnid-veil { opacity: 1; }
.nnid.is-open .nnid-island { opacity: 1; transform: none; }

.nnid-head { display: flex; align-items: center; gap: 12px; padding: 17px 20px;
  background: var(--nn-card);
  border-bottom: 1px solid color-mix(in srgb, var(--nn-line) 70%, transparent); }
.nnid-ttl { display: flex; flex-direction: column; gap: 2px; margin-right: auto; }
.nnid-ttl b { font: 600 15px var(--font-sans); color: var(--nn-ink); }
.nnid-ttl i { font-style: normal; font: 400 11.5px var(--font-sans); color: var(--nb-gray-300); }
.nnid-out { font: 500 12px var(--font-sans); color: var(--nn-cyan); text-decoration: none; }
.nnid-out:hover { text-decoration: underline; }
.nnid-x { width: 30px; height: 30px; flex: none; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--nn-line); border-radius: 999px; background: none; cursor: pointer;
  color: var(--nn-body);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.nnid-x svg { width: 14px; height: 14px; }
.nnid-x:hover { border-color: var(--nn-cyan); color: var(--nn-cyan); }

/* The board fills the island below the header. The island already clips and rounds,
   so the frame drops its own border and radius. */
.nnid-island .nni-frame { flex: 1; min-height: 0; border: 0; border-radius: 0;
  background: var(--nn-card); }

@media (max-width: 720px) {
  .nnid { padding: 2vh 3vw; }
  .nnid-island { width: 96vw; height: 94vh; border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .nnid-island { transition: opacity .2s linear; transform: none; }
  .nnid.is-open .nnid-island { transform: none; }
  .nnid-veil { transition: none; }
}

html[data-theme="dark"] .nnid-veil { background: rgba(0,0,0,.6); }

html[data-theme="dark"] .nni-frame { background: linear-gradient(160deg, #1a1e22 0%, #101315 100%); }
html[data-theme="dark"] .nni-embed { color-scheme: dark; }


  /* ============================================================
     DARK MODE — widget surfaces
     These tiles predate the token layer and paint literal whites;
     re-point them at --nn-card / --nn-field so the home page's
     widget row follows html[data-theme="dark"] like everything else.
     ============================================================ */
  html[data-theme="dark"] .sf-tile { background: var(--nn-card);
    box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 14px 30px -26px rgba(0,0,0,.8); }
  html[data-theme="dark"] .sf-pa-card,
  html[data-theme="dark"] .ql-card,
  html[data-theme="dark"] .ql-pin,
  html[data-theme="dark"] .qlh-msg,
  html[data-theme="dark"] .qlh-resolve,
  html[data-theme="dark"] .qla-cal,
  html[data-theme="dark"] .sf-app-cell { background: var(--nn-field);
    box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 12px 26px -18px rgba(0,0,0,.85); }
  html[data-theme="dark"] .qlv-seat,
  html[data-theme="dark"] .qlr-node,
  html[data-theme="dark"] .qla-pad { background: linear-gradient(160deg, #1e2226 0%, #14171a 100%);
    color: #6d757c;
    box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 18px -14px rgba(0,0,0,.9),
      0 0 0 1px rgba(255,255,255,.05); }
  html[data-theme="dark"] .qlv-seat.is-open { background: color-mix(in srgb, var(--ql-accent) 22%, #16191c); }
  html[data-theme="dark"] .qlh-msg.is-out { background: color-mix(in srgb, var(--ql-accent) 22%, #16191c); }
  html[data-theme="dark"] .qlt-back { background: color-mix(in srgb, var(--ql-accent) 22%, #16191c); }
  html[data-theme="dark"] .qla-cal-grid i.is-off { background: color-mix(in srgb, #F8485E 26%, #16191c); }
  html[data-theme="dark"] .qla-key { background: #22262a; }
  html[data-theme="dark"] .qlh-av { background: #22262a; color: #8b959b; }

  html[data-theme="dark"] .sf-tree-av { border-color: var(--nn-card); }
  html[data-theme="dark"] .sf-scroll-thumb-ph { background: repeating-linear-gradient(45deg,
      var(--bg-subtle) 0 10px, #23272b 10px 20px); }

  /* The teaser stages mix a literal near-white into their gradient, which reads
     as bright silver against a dark page. One dark gradient for all of them. */
  html[data-theme="dark"] .nsc-stage,
  html[data-theme="dark"] .sf-people-art,
  html[data-theme="dark"] .ql-stage,
  html[data-theme="dark"] .qli-stage,
  html[data-theme="dark"] .nnw-cloud { background: linear-gradient(160deg, #1a1e22 0%, #101315 100%); }

  /* Tag pills read as bright light-cyan lozenges in dark, because --nb-cyan-tint is
     a light tint. Re-mix the tint against the card surface. */
  html[data-theme="dark"] .sf-scroll-tag,
  html[data-theme="dark"] .nn-tag { background: color-mix(in srgb, var(--nn-cyan) 20%, #16191c); color: var(--nn-cyan); }
  html[data-theme="dark"] .sf-scroll-tag:hover,
  html[data-theme="dark"] .nn-tag:hover { background: var(--nn-cyan); color: var(--nb-deep); }

  /* Ask the Execs — the question card and the team pill were literal white. */
  html[data-theme="dark"] .qle-ask,
  html[data-theme="dark"] .qle-panel { background: var(--nn-field);
    box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 14px 28px -18px rgba(0,0,0,.85); }
  html[data-theme="dark"] .qle-ask em { color: var(--nb-gray-300); }
  html[data-theme="dark"] .qle-ask b { color: var(--nn-ink); }


/* ===== New starters in a narrow tile ===== */
@container (max-width: 360px) {
  .nsc-card { padding: 16px 14px; }
  .nsp-plate { padding: 13px 14px 12px; gap: 10px; }
  .nsp-head { gap: 12px; }
  .sd-av--nsc { width: 50px; height: 50px; font-size: 17px; }
  .nsc-nm { font-size: 16px; }
  .nsc-role { font-size: 12px; }
  .nsc-txt { flex: 1; min-width: 0; }
  .nsp-stamp { flex: none; }
  .nsp-mark { height: 16px; }
  .nsp-foot { padding-top: 9px; }
}

/* The plate is a near-match for the dark stage behind it, so the light-mode drop
   shadow reads as nothing — a hairline lifts it off instead. */
html[data-theme="dark"] .nsp-plate { background: var(--nn-field);
  box-shadow: 0 0 0 1px rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.5),
    0 16px 30px -18px rgba(0,0,0,.85); }
html[data-theme="dark"] .sf-tile-faces:hover .nsp-plate {
  box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.5),
    0 22px 36px -20px rgba(0,0,0,.9); }
html[data-theme="dark"] .nsp-slack { background: var(--nn-field); }
html[data-theme="dark"] .nsp-flag { box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
@container (max-width: 260px) {
  .qlv-seats { grid-template-columns: repeat(3, 38px); gap: 7px; }
  .qlv-seat { width: 38px; height: 38px; border-radius: 12px; }
  .qlv-seat svg { width: 15px; height: 15px; }
  .qlv-cap { font-size: 11px; text-align: center; }
}
@container (max-width: 250px) {
  .qle-wrap { padding: 0 11px; gap: 9px; }
  .qle-ask { padding: 9px 11px 10px; }
  .qle-ask b { font-size: 12px; min-height: 2.9em; }
  .qle-panel { padding: 5px 11px; }
  .qle-lbl { font-size: 10.5px; }
}