/* ==========================================================================
   Nexus landing v5: section tweaks on top of v4.css.
   ========================================================================== */

/* ---- plugins: the app tabs read like the top bar -----------------------------
   No boxes. Inactive apps sit back (gray label, dimmed mark); the active one
   is white with its mark at full color, and the 2px cyan line under it is
   also the timer that fills before the next app comes up. */
.x-hostbar { gap: clamp(14px, 2.4vw, 34px); }
.x-host {
  height: 44px; padding: 0 2px; border: 0; background: none; color: var(--x-fg-3);
  transition: color 220ms linear;
}
.x-host .app-mark, .x-host svg { opacity: 0.45; filter: saturate(0.6); transition: opacity 220ms linear, filter 220ms linear; }
.x-host:hover { color: var(--x-fg-2); border-color: transparent; }
.x-host:hover .app-mark, .x-host:hover svg { opacity: 0.8; filter: none; }
.x-host.on { color: #fff; border-color: transparent; background: none; }
.x-host.on .app-mark, .x-host.on svg { opacity: 1; filter: none; }
/* 2px, and always on its own layer, so the line is the same weight while it
   fills and once it is full */
.x-host i { left: 0; right: 0; bottom: 0; height: 2px; background: #7df9ff; will-change: transform; backface-visibility: hidden; }
@media (max-width: 700px) {
  .x-hostbar { gap: 4px; }
  .x-host { padding: 0; }
}

/* ---- downloads: the Creator pitch ---------------------------------------------
   The box keeps its gradient and cyan top rule; no tag. A headline with one
   word in cyan, one line of what you get, the trial. */
.dl-offer-then { color: var(--x-fg-2); }

/* ---- downloads: buttons that read ---------------------------------------------------
   Every download button gets a real fill. The ones for the visitor's own
   system (and Figma, the only choice in its row) are white, so each row has
   one obvious button; buttons.js marks them .dl-mine. */
.dl-link {
  height: 36px; padding: 0 14px 0 16px; font-size: 13px; color: #fff;
  background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16);
  transition: background-color 220ms linear, border-color 220ms linear, color 220ms linear;
}
.dl-link:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.26); color: #fff; }
.dl-link .dl-arr { color: var(--x-fg-2); }
.dl-link:hover .dl-arr { color: #fff; }
.dl-link.dl-mine { background: #fff; border-color: #fff; color: #050505; }
.dl-link.dl-mine:hover { background: #d4d4d4; border-color: #d4d4d4; color: #050505; }
.dl-link.dl-mine .dl-arr, .dl-link.dl-mine:hover .dl-arr { color: #050505; }

/* the download arrow drops into its tray and out, and a fresh one falls in
   from the top (the tray line stays put) (the Figma arrow does the same up and to the right); the
   icon clips its own drawing, so nothing jumps */
.dl-link .dl-arr, .dl-link:hover .dl-arr { transform: none; overflow: hidden; transition: color 220ms linear; }
.dl-link:hover .dl-arr path:not(.dl-tray) { animation: dl-drop 620ms both; }
.dl-link:hover .dl-arr.dl-out path { animation-name: dl-ne; }
@keyframes dl-drop {
  0% { transform: translateY(0); opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0); }
  42% { transform: translateY(14px); opacity: 0; }
  43% { transform: translateY(-14px); opacity: 0; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes dl-ne {
  0% { transform: translate(0, 0); opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0); }
  42% { transform: translate(14px, -14px); opacity: 0; }
  43% { transform: translate(-14px, 14px); opacity: 0; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  100% { transform: translate(0, 0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .dl-link:hover .dl-arr path:not(.dl-tray), .dl-link:hover .dl-arr.dl-out path { animation: none; } }


/* ---- footer: the newsletter field ------------------------------------------------
   One 6px field; the Subscribe button sits inside it on the right, inset
   4px all round, on 4px corners. The field's edge brightens while you type. */
.x-foot .nl-row {
  gap: 0; height: 48px; padding: 4px; max-width: 440px; border-radius: 6px;
  border: 1px solid var(--x-line-2); background: rgba(255, 255, 255, 0.03);
  transition: border-color 220ms linear;
}
.x-foot .nl-row:focus-within { border-color: rgba(255, 255, 255, 0.4); }
.x-foot .nl-in { height: 100%; padding: 0 14px; border: 0; background: none; border-radius: 4px; }
.x-foot .nl-in:focus { border-color: transparent; }
.x-foot .nl-row .btn { height: 100%; padding: 0 18px; flex: none; border-radius: 4px; }

/* the note sits on the heading line, one line, never wrapped; the newsletter
   column is at least wide enough to hold it */
.x-foot .nl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; max-width: 440px; }
.x-foot .nl-head h4 { margin: 0; flex: none; }
/* the heading line spans the pill exactly: "Updates" on its left edge, the
   note ending on its right edge */
.x-foot .nl-head .nl-note { margin: 0; white-space: nowrap; }
.x-foot-grid { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)) minmax(440px, 1.6fr); }
@media (max-width: 1100px) { .x-foot-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 900px) { .x-foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .x-foot .nl-head { flex-direction: column; gap: 6px; } .x-foot .nl-head .nl-note { white-space: normal; text-wrap: balance; } }

/* the footer wordmark, alone (no tagline) */
.x-foot .x-wordmark { display: inline-block; }
.x-foot .x-wordmark img { display: block; height: 22px; width: auto; }

/* ---- the link at the end of a lede (Studio: the web editor, Pricing: every feature) ---- */
.x-more { display: inline-flex; align-items: center; gap: 0.4em; white-space: nowrap; font-weight: 500; color: #7df9ff;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(125, 249, 255, 0.5); transition: text-decoration-color 160ms ease; }
/* the same arrow as the buttons (buttons.css .x-btn-ne): cap height, so it
   sits from the top of the capitals to the baseline, and the same fly-out on
   hover (sections.css dl-ne) */
.x-more svg { width: 0.72em; height: 0.72em; flex: none; fill: currentColor; overflow: hidden; }
.x-more:hover { text-decoration-color: #7df9ff; }
.x-more:hover svg path { animation: dl-ne 620ms both; }
@media (prefers-reduced-motion: reduce) { .x-more:hover svg path { animation: none; } }
.x-more:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }