/*
 * Copyright (C) Ascensio System SIA, 2009-2026
 *
 * This program is a free software product. You can redistribute it and/or
 * modify it under the terms of the GNU Affero General Public License (AGPL)
 * version 3 as published by the Free Software Foundation, together with the
 * additional terms provided in the LICENSE file.
 *
 * This program is distributed WITHOUT ANY WARRANTY; without even the implied
 * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For
 * details, see the GNU AGPL at: https://www.gnu.org/licenses/agpl-3.0.html
 *
 * You can contact Ascensio System SIA by email at info@onlyoffice.com
 * or by postal mail at 20A-6 Ernesta Birznieka-Upisha Street, Riga,
 * LV-1050, Latvia, European Union.
 *
 * The interactive user interfaces in modified versions of the Program
 * are required to display Appropriate Legal Notices in accordance with
 * Section 5 of the GNU AGPL version 3.
 *
 * No trademark rights are granted under this License.
 *
 * All non-code elements of the Product, including illustrations,
 * icon sets, and technical writing content, are licensed under the
 * Creative Commons Attribution-ShareAlike 4.0 International License:
 * https://creativecommons.org/licenses/by-sa/4.0/legalcode
 *
 * This license applies only to such non-code elements and does not
 * modify or replace the licensing terms applicable to the Program's
 * source code, which remains licensed under the GNU Affero General
 * Public License v3.
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */

/* ----------------------------------------------------------------------------
 * Phase 2 unified welcome page styles. Loaded only by index.html, AFTER
 * css/stylesheet.css. Old per-platform pages (linux.html, linux-rpm.html,
 * docker.html, win.html, k8s.html) intentionally do not load this file and
 * must not be affected by anything declared here.
 *
 * Every rule is scoped to .welcome2 (the <body> class) or to one of the
 * Phase 1 routing classes (.example-variant, .requires-admin-panel,
 * .requires-test-example). No :root tokens. No bare element selectors.
 * -------------------------------------------------------------------------- */

/* Not in the repo: build_tools copies these next to this stylesheet. */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    local('Open Sans'),
    local('OpenSans'),
    url('OpenSans-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src:
    local('Open Sans SemiBold'),
    local('OpenSans-Semibold'),
    url('OpenSans-Semibold.ttf') format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:
    local('Open Sans Bold'),
    local('OpenSans-Bold'),
    url('OpenSans-Bold.ttf') format('truetype');
}

/* ---- Phase 1 routing rules ------------------------------------------------ */

.example-variant {
  display: none;
}

html[data-platform='linux'] .example--systemctl,
html[data-platform='win'] .example--winsvc,
html[data-platform='docker'] .example--docker,
html[data-platform='k8s'] .example--k8s {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Install free apps modal routing: same sibling pattern as .example-variant. */
.install-variant {
  display: none;
}

html[data-platform='linux'] .install--linux,
html[data-platform='win'] .install--win {
  display: flex;
  flex-direction: column;
}

/* docker and any unrecognized value fall back to the Docker image variant; k8s is excluded here since it shows a plain link instead. */
html:not([data-platform='linux']):not([data-platform='win']):not([data-platform='k8s']) .install--docker {
  display: flex;
  flex-direction: column;
}

/* Admin Panel button shows in every edition. Routing (navigate vs Enterprise
   promo modal) is decided in JS from data-has-admin-panel (feedback #10/#11). */

/* ---- Design tokens (scoped to .welcome2) --------------------------------- */

.welcome2 {
  --w2-color-bg: #ffffff;
  --w2-color-heading: #333333;
  --w2-color-text: #555f65;
  --w2-color-primary: #5299e0;
  /* DocSpace UI Kit button states: hover = primary @ 85%, pressed = +10% black overlay, disabled = primary @ 60%. */
  --w2-color-primary-hover: rgba(82, 153, 224, 0.85);
  --w2-color-primary-pressed: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), #5299e0;
  --w2-color-primary-disabled: rgba(82, 153, 224, 0.6);
  /* buttons-state macet: primary disabled label = white @ 60%; ghost disabled label = gray/strong. */
  --w2-color-primary-disabled-text: rgba(255, 255, 255, 0.6);
  --w2-color-btn-disabled-text: #d0d5da;
  --w2-color-primary-text: #ffffff;
  --w2-color-link: #4781d1;
  --w2-color-link-hover: #3568b8;
  /* DocSpace "accent color/hover": link @ 85%, used on documentation card hover. */
  --w2-color-link-hover-soft: rgba(71, 129, 209, 0.85);
  --w2-color-success: #35ad17;
  --w2-color-success-bg: rgba(53, 173, 23, 0.1);
  --w2-color-warn: #ed7309;
  --w2-color-warn-bg: #f8f9f9;
  --w2-color-error: #e54d39;
  --w2-color-error-bg: rgba(229, 77, 57, 0.1);
  --w2-color-unknown-fg: #555f65;
  --w2-color-unknown-bg: #eceef1;
  --w2-color-editor-card: #f9f9f9;
  --w2-color-editor-card-hover: #f3f4f4;
  /* DocSpace card hovers: apps = gray/light, connectors + documentation = gray/light-hover. */
  --w2-color-app-card-hover: #f8f9f9;
  --w2-color-card-hover: #f3f4f4;
  /* DocSpace secondary button pressed fill (gray/mid). */
  --w2-color-btn-pressed-bg: #eceef1;
  /* DocSpace "Blackout" token: dimming behind modal dialogs (feedback #12). */
  --w2-color-blackout: rgba(6, 22, 38, 0.2);
  --w2-color-surface: #ffffff;
  --w2-color-accordion: #f8f9f9;
  --w2-color-border: #dfe2e3;
  --w2-color-border-strong: #d0d5da;
  --w2-color-pre-bg: #ffffff;
  --w2-color-footer-bg: #f8f9f9;
  --w2-color-footer-dark: #333333;
  --w2-color-footer-dim: #a3a9ae;
  --w2-color-footer-link: #ffffff;

  --w2-radius-btn: 3px;
  --w2-radius-card: 8px;
  --w2-radius-accordion: 12px;
  --w2-radius-badge: 3px;
  --w2-radius-input: 3px;
  --w2-radius-note: 6px;
  --w2-radius-app-card: 12px;

  --w2-font: 'Open Sans', sans-serif;

  --w2-content-max: 1024px;
  /* Product-approved compact top offset; Figma export keeps 64px here. */
  --w2-page-pad-top: 48px;
  --w2-page-pad-bottom: 64px;
  --w2-page-pad-x: 0px;
  --w2-footer-content-max: 984px;
  --w2-gap-section: 48px;
}

/* ---- Scoped reset (counteracts legacy stylesheet.css) ------------------- */

.welcome2,
.welcome2 *,
.welcome2 *::before,
.welcome2 *::after {
  box-sizing: border-box;
}

.welcome2 {
  background: var(--w2-color-bg);
  color: var(--w2-color-text);
  font-family: var(--w2-font);
  font-size: 15px;
  line-height: 22px;
  min-height: 100%;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.welcome2 h1,
.welcome2 h2,
.welcome2 h3,
.welcome2 h4,
.welcome2 h5 {
  margin: 0;
  padding: 0;
  font-weight: 700;
  color: var(--w2-color-heading);
  background: none;
  letter-spacing: normal;
}

.welcome2 p {
  margin: 0;
  padding: 0;
  color: var(--w2-color-text);
}

.welcome2 ul,
.welcome2 ol,
.welcome2 li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.welcome2 a,
.welcome2 a:visited {
  color: var(--w2-color-primary);
  text-decoration: none;
  background: none;
}
.welcome2 a:hover {
  color: var(--w2-color-primary-hover);
  text-decoration: underline;
}

.welcome2 button {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.welcome2 pre,
.welcome2 code {
  font-family: 'Consolas', 'Menlo', 'Monaco', monospace;
  background: none;
  color: var(--w2-color-heading);
  margin: 0;
  padding: 0;
}

.welcome2 img,
.welcome2 svg {
  display: block;
  max-width: 100%;
}

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

.welcome2 .welcome2__main {
  max-width: var(--w2-content-max);
  margin: 0 auto;
  padding: var(--w2-page-pad-top) var(--w2-page-pad-x) var(--w2-page-pad-bottom);
  display: flex;
  flex-direction: column;
  gap: var(--w2-gap-section);
}

/* Logo + hero share the tighter 32px stack gap (Figma top block) so they do
   not inherit the larger 48px section gap that separates the main blocks. */
.welcome2 .welcome2__hero-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.welcome2 .welcome2__h2 {
  margin: 0;
  color: var(--w2-color-heading);
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
}

.welcome2 .welcome2__desc {
  margin: 0;
  color: var(--w2-color-text);
  font-size: 16px;
  line-height: 22px;
}

.welcome2 .welcome2__section-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.welcome2 .welcome2__section-head-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  min-height: 24px;
}

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

.welcome2 .welcome2__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 40px tall buttons incl. the 1px border (Figma): footer = 40 + 16*2 padding = 72px. */
  padding: 9px 28px;
  min-height: 40px;
  border-radius: var(--w2-radius-btn);
  font-family: var(--w2-font);
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  background-image: none;
  background-color: transparent;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

.welcome2 .welcome2__btn:hover {
  text-decoration: none;
}
.welcome2 .welcome2__btn:focus-visible {
  outline: 2px solid var(--w2-color-primary);
  outline-offset: 2px;
}

.welcome2 .welcome2__btn--primary,
.welcome2 .welcome2__btn--primary:visited {
  background-color: var(--w2-color-primary);
  color: var(--w2-color-primary-text);
  border-color: var(--w2-color-primary);
}
.welcome2 .welcome2__btn--primary:hover {
  background-color: var(--w2-color-primary-hover);
  border-color: var(--w2-color-primary-hover);
  color: var(--w2-color-primary-text);
}
.welcome2 .welcome2__btn--primary:active {
  background: var(--w2-color-primary-pressed);
  border-color: var(--w2-color-primary);
  color: var(--w2-color-primary-text);
}
.welcome2 .welcome2__btn--primary:disabled,
.welcome2 .welcome2__btn--primary[disabled],
.welcome2 .welcome2__btn--primary[aria-disabled='true'] {
  background-color: var(--w2-color-primary-disabled);
  /* transparent: a translucent border would stack over the translucent fill into a darker rim. */
  border-color: transparent;
  color: var(--w2-color-primary-disabled-text);
  cursor: default;
  pointer-events: none;
}

/* Secondary (ghost on light): hover keeps text dark, only the border turns blue. */
.welcome2 .welcome2__btn--ghost-light,
.welcome2 .welcome2__btn--ghost-light:visited {
  background-color: #ffffff;
  color: var(--w2-color-heading);
  border: 1px solid var(--w2-color-border-strong);
}
.welcome2 .welcome2__btn--ghost-light:hover {
  background-color: #ffffff;
  border-color: var(--w2-color-primary);
  color: var(--w2-color-heading);
}
.welcome2 .welcome2__btn--ghost-light:active {
  background-color: var(--w2-color-btn-pressed-bg);
  border-color: var(--w2-color-border-strong);
  color: var(--w2-color-heading);
}
.welcome2 .welcome2__btn--ghost-light:disabled,
.welcome2 .welcome2__btn--ghost-light[disabled],
.welcome2 .welcome2__btn--ghost-light[aria-disabled='true'] {
  background-color: #f8f9f9; /* gray/light */
  border-color: #eceef1; /* gray/mid */
  color: var(--w2-color-btn-disabled-text); /* gray/strong, per buttons-state macet */
  cursor: default;
  pointer-events: none;
}

/* GitHub button = secondary button + 16px octocat; inherits the base 6px 28px
   padding to match the mockup width (feedback #8). */
.welcome2 .welcome2__btn--with-icon {
  gap: 8px;
}
.welcome2 .welcome2__btn-icon {
  width: 16px;
  height: 16px;
  display: block;
}

/* Small size: same label style as the base button, just a shorter fixed height. */
.welcome2 .welcome2__btn--small {
  min-height: 32px;
  /* 5px keeps the button at the mockup's 32px once the 1px border is counted. */
  padding: 5px 28px;
}

/* Apps-section Install trigger: k8s shows the external link, every other platform the modal button. */
.welcome2 .install-open-btn,
.welcome2 .install-open-link {
  display: none;
}
html:not([data-platform='k8s']) .welcome2 .install-open-btn {
  display: inline-flex;
}
html[data-platform='k8s'] .welcome2 .install-open-link {
  display: inline-flex;
}

.welcome2 .welcome2__button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}

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

.welcome2 .welcome2__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 0;
}

.welcome2 .welcome2__logo {
  width: 319.1px;
  height: 45px;
  align-self: center;
}

.welcome2 .welcome2__hero-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.welcome2 .welcome2__title {
  color: var(--w2-color-heading);
  font-size: 23px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: 0;
}

.welcome2 .welcome2__subtitle {
  color: var(--w2-color-text);
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
}

/* ---- Test example section ------------------------------------------------ */

.welcome2 .welcome2__test-example {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ---- Test-example commands (shown inside the start/stop modals) ---------- */

.welcome2 .welcome2__k8s-note {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--w2-color-text);
}
.welcome2 .welcome2__k8s-note code {
  font-family: 'Consolas', 'Menlo', 'Monaco', monospace;
  font-size: 12px;
  color: var(--w2-color-heading);
}

/* ---- Editor cards -------------------------------------------------------- */

.welcome2 .welcome2__editor-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.welcome2 .welcome2__editor-card,
.welcome2 .welcome2__editor-card:visited {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px 32px 16px;
  min-height: 172px;
  background: var(--w2-color-editor-card);
  border-radius: var(--w2-radius-card);
  color: var(--w2-color-heading);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: background-color 0.15s ease;
}
/* Flat hover to match the desktop editor start page: background highlight only,
   no lift or drop shadow (designer feedback #2). */
.welcome2 .welcome2__editor-card:hover {
  background: var(--w2-color-editor-card-hover);
  color: var(--w2-color-heading);
  text-decoration: none;
}
.welcome2 .welcome2__editor-card:focus-visible {
  outline: 2px solid var(--w2-color-primary);
  outline-offset: -2px;
}

.welcome2 .welcome2__editor-art {
  position: relative;
  width: 108px;
  height: 100px;
  flex: 0 0 100px;
}
.welcome2 .welcome2__editor-paper {
  width: 108px;
  height: 100px;
  display: block;
}
.welcome2 .welcome2__editor-badge {
  position: absolute;
  top: -12px;
  left: -15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 6px;
  border-radius: 6px;
  color: #ffffff;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.5px;
  white-space: nowrap;
  box-sizing: border-box;
  pointer-events: none;
}
.welcome2 .welcome2__editor-badge--docx {
  background: conic-gradient(from 225deg at 50% 50%, #4298c5 0deg, #2d84b2 360deg);
}
.welcome2 .welcome2__editor-badge--xlsx {
  background: conic-gradient(from 225deg at 50% 50%, #5bb514 0deg, #318c2b 360deg);
}
.welcome2 .welcome2__editor-badge--pptx {
  background: conic-gradient(from 225deg at 50% 50%, #f4893a 0deg, #de7341 360deg);
}
.welcome2 .welcome2__editor-badge--pdf {
  background: conic-gradient(from 225deg at 50% 50%, #f36653 0deg, #d2402d 360deg);
}

.welcome2 .welcome2__editor-label {
  color: var(--w2-color-heading);
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  text-align: center;
}

/* ---- Accordion ----------------------------------------------------------- */

.welcome2 .welcome2__accordion {
  background: var(--w2-color-accordion);
  border-radius: var(--w2-radius-accordion);
  /* Padding lives on the head/body so the entire header card is the click target. */
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* The head button fills the whole card (edge to edge) so a click anywhere on the
   header region - including the former section padding - toggles the accordion. */
.welcome2 .welcome2__accordion-head {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 24px;
  list-style: none;
  width: 100%;
}
.welcome2 button.welcome2__accordion-head {
  cursor: pointer;
  user-select: none;
}
.welcome2 button.welcome2__accordion-head {
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
}
.welcome2 .welcome2__accordion-head:focus-visible {
  outline: 2px solid var(--w2-color-primary);
  outline-offset: -2px;
  border-radius: var(--w2-radius-accordion);
}

.welcome2 .welcome2__accordion-head-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}

.welcome2 .welcome2__accordion-head-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
}

.welcome2 .welcome2__accordion-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  color: var(--w2-color-heading);
}

.welcome2 .welcome2__accordion-head-desc {
  color: var(--w2-color-text);
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
}

.welcome2 .welcome2__chevron {
  width: 16px;
  /* Box matches the title line-height so the 16px glyph centers on the heading (feedback #5). */
  height: 24px;
  background-image: url('icon-chevron.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  transform: rotate(0deg);
  transition: transform 0.15s ease;
  flex: 0 0 16px;
  align-self: flex-start;
}
.welcome2 .welcome2__accordion-head[aria-expanded='true'] .welcome2__chevron {
  transform: rotate(180deg);
}

.welcome2 .welcome2__accordion-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Matches the head's side/bottom padding now that the section padding is 0. */
  padding: 0 24px 24px;
}

/* Default: when the accordion is closed the entire body collapses. */
.welcome2 .welcome2__accordion-head[aria-expanded='false'] + .welcome2__accordion-body {
  display: none;
}

.welcome2 .welcome2__accordion-extras {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---- Command input blocks + copy button --------------------------------- */

.welcome2 .welcome2__cmd-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.welcome2 .welcome2__field-label {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  color: var(--w2-color-heading);
}

/* Caption under a field label (install modal), same token as the note body. */
.welcome2 .welcome2__field-desc {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--w2-color-text);
}

.welcome2 .welcome2__cmd {
  position: relative;
  margin: 0;
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 32px;
  background: var(--w2-color-pre-bg);
  border: 1px solid var(--w2-color-border-strong);
  border-radius: var(--w2-radius-input);
}
.welcome2 .welcome2__cmd pre {
  flex: 1 1 auto;
  margin: 0;
  padding: 6px 40px 6px 8px;
  background: transparent;
  border: 0;
  font-family: var(--w2-font);
  font-size: 13px;
  line-height: 20px;
  color: var(--w2-color-heading);
  overflow-x: auto;
  white-space: pre;
  word-break: normal;
}
.welcome2 .welcome2__copy {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 3px;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  /* background-image (not mask) so the icon renders over file:// too; hover swaps to the #657077 variant (feedback #14). */
  background: transparent url('icon-copy.svg') center / 16px 16px no-repeat;
}
.welcome2 .welcome2__copy:hover {
  background-image: url('icon-copy-hover.svg');
}
.welcome2 .welcome2__copy.is-copied,
.welcome2 .welcome2__copy.is-copied:hover {
  background-image: url('icon-check.svg');
}

/* ---- Note (info block) -------------------------------------------------- */

.welcome2 .welcome2__note {
  margin: 0;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  background: var(--w2-color-warn-bg);
  border-radius: var(--w2-radius-note);
}
/* In modals, long commands wrap (match mockup) and the copy sits top-right. */
.welcome2 .welcome2__modal-body .welcome2__cmd {
  align-items: flex-start;
}
.welcome2 .welcome2__modal-body .welcome2__cmd pre {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: visible;
}
.welcome2 .welcome2__modal-body .welcome2__copy {
  top: 6px;
  transform: none;
}
.welcome2 .welcome2__note-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  color: var(--w2-color-heading);
}
.welcome2 .welcome2__note-icon {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background-image: url('icon-info.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}
.welcome2 .welcome2__note-body {
  font-size: 12px;
  line-height: 16px;
  color: var(--w2-color-text);
}
/* Info variant (blue icon) - e.g. the Admin Panel bootstrap-code note. */
.welcome2 .welcome2__note--info .welcome2__note-icon {
  background-image: url('icon-info-blue.svg');
}

/* ---- Status badge + reusable chip --------------------------------------- */

.welcome2 .welcome2__status-badge,
.welcome2 .welcome2__chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: var(--w2-radius-badge);
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  color: var(--w2-color-unknown-fg);
  background: var(--w2-color-unknown-bg);
  white-space: nowrap;
}

.welcome2 .welcome2__chip--positive,
.welcome2 [data-example-state='up'] .welcome2__status-badge {
  color: var(--w2-color-success);
  background: var(--w2-color-success-bg);
}
.welcome2 [data-example-state='down'] .welcome2__status-badge {
  color: var(--w2-color-error);
  background: var(--w2-color-error-bg);
}
.welcome2 [data-example-state='unknown'] .welcome2__status-badge {
  color: var(--w2-color-unknown-fg);
  background: var(--w2-color-unknown-bg);
}

/* Checking: status probe still in flight. Neutral badge + spinner (buttons-state
   Loader ring color); the gated controls reuse the shared [aria-disabled] styles. */
.welcome2 [data-example-state='checking'] .welcome2__status-badge {
  color: var(--w2-color-unknown-fg);
  background: var(--w2-color-unknown-bg);
  gap: 6px;
}
.welcome2 [data-example-state='checking'] .welcome2__status-badge::before {
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: conic-gradient(from 90deg at 50% 50%, rgba(82, 153, 224, 0) 0deg, #5299e0 359.96deg, rgba(82, 153, 224, 0) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
  animation: welcome2-spin 0.7s linear infinite;
}
.welcome2 .welcome2__editor-card[aria-disabled='true'] {
  opacity: 0.6;
  pointer-events: none;
  cursor: default;
}
@keyframes welcome2-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .welcome2 [data-example-state='checking'] .welcome2__status-badge::before {
    animation: none;
  }
}

/* ---- Apps section -------------------------------------------------------- */

.welcome2 .welcome2__apps {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.welcome2 .welcome2__apps-label-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.welcome2 .welcome2__apps-label {
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  color: var(--w2-color-heading);
}

.welcome2 .welcome2__app-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.welcome2 .welcome2__app-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--w2-color-surface);
  border: 1px solid var(--w2-color-border);
  border-radius: var(--w2-radius-app-card);
  min-height: 108px;
  /* Whole card is the click target (feedback #4); a stretched button opens the app modal (#7). */
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.welcome2 .welcome2__app-card:hover {
  background: var(--w2-color-app-card-hover);
}
.welcome2 .welcome2__app-card-trigger {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.welcome2 .welcome2__app-card-trigger:focus-visible {
  outline: 2px solid var(--w2-color-primary);
  outline-offset: -2px;
  border-radius: var(--w2-radius-app-card);
}

.welcome2 .welcome2__app-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: #eceef1;
  flex: 0 0 32px;
}
.welcome2 .welcome2__app-icon img {
  width: 16px;
  height: 16px;
}

.welcome2 .welcome2__app-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.welcome2 .welcome2__app-title {
  color: var(--w2-color-heading);
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
}

.welcome2 .welcome2__app-desc {
  color: var(--w2-color-text);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  margin: 0;
}

/* ---- Enterprise promo strip (Community edition only) --------------------- */

.welcome2 .welcome2__enterprise-promo {
  display: none;
  align-items: center;
  /* Sits 32px under the apps buttons instead of the full 48px section gap, per the mockup. */
  margin-top: -16px;
  width: 100%;
  min-height: 80px;
  padding: 20px;
  gap: 32px;
  background: rgba(71, 129, 209, 0.05);
  border-radius: 12px;
}

/* data-has-admin-panel is the page's existing Community-vs-Enterprise signal. */
html[data-has-admin-panel='false'] .welcome2 .welcome2__enterprise-promo {
  display: flex;
}

.welcome2 .welcome2__enterprise-promo-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

.welcome2 .welcome2__enterprise-promo-title-row {
  display: flex;
  /* Keeps the icon on the first line when the title wraps on narrow screens. */
  align-items: flex-start;
  gap: 8px;
}

.welcome2 .welcome2__enterprise-promo-title {
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  color: var(--w2-color-heading);
}

.welcome2 .welcome2__enterprise-promo-icon {
  flex: 0 0 16px;
  display: block;
  width: 16px;
  height: 16px;
}

.welcome2 .welcome2__enterprise-promo-desc {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--w2-color-text);
}

/* Narrow screens: the trial button drops under the copy instead of squeezing it. */
@media (max-width: 720px) {
  .welcome2 .welcome2__enterprise-promo {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

/* ---- Connectors ---------------------------------------------------------- */

.welcome2 .welcome2__connector-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
}
.welcome2 .welcome2__connector-grid li {
  position: relative;
  padding: 20px;
  background: var(--w2-color-surface);
  border: 1px solid var(--w2-color-border);
  border-radius: var(--w2-radius-app-card);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
  min-height: 85.6px;
  transition: background-color 0.15s ease;
}
.welcome2 .welcome2__connector-grid li:hover {
  background: var(--w2-color-card-hover);
}
.welcome2 .welcome2__connector-grid li.welcome2__connector-more {
  background: var(--w2-color-accordion);
}
.welcome2 .welcome2__connector-grid li.welcome2__connector-more:hover {
  background: var(--w2-color-card-hover);
}
.welcome2 .welcome2__connector-name {
  color: var(--w2-color-heading);
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
}
.welcome2 .welcome2__connector-grid a {
  color: var(--w2-color-link);
  font-size: 13px;
  line-height: 15px;
  font-weight: 600;
  text-decoration: none;
}
/* Stretch the single link over the whole card so the entire card is clickable. */
.welcome2 .welcome2__connector-grid a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--w2-radius-app-card);
}
.welcome2 .welcome2__connector-grid li:hover a,
.welcome2 .welcome2__connector-grid a:hover {
  color: var(--w2-color-link);
  text-decoration: none;
}
.welcome2 .welcome2__connector-grid a:focus-visible::after {
  outline: 2px solid var(--w2-color-primary);
  outline-offset: -2px;
}

/* ---- Build with ONLYOFFICE ---------------------------------------------- */

.welcome2 .welcome2__dev-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
}
.welcome2 .welcome2__dev-grid li {
  position: relative;
  padding: 16px;
  background: var(--w2-color-surface);
  border: 1px solid var(--w2-color-border);
  border-radius: var(--w2-radius-app-card);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 152px;
  transition: background-color 0.15s ease;
}
.welcome2 .welcome2__dev-grid li:hover {
  background: var(--w2-color-card-hover);
}
.welcome2 .welcome2__dev-title {
  color: var(--w2-color-heading);
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
}
.welcome2 .welcome2__dev-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.welcome2 .welcome2__dev-desc {
  color: var(--w2-color-text);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  margin: 0;
}
.welcome2 .welcome2__dev-grid a {
  color: var(--w2-color-link);
  font-size: 13px;
  line-height: 15px;
  font-weight: 600;
  text-decoration: none;
  align-self: flex-start;
  /* Pin to the card bottom so links line up across cards (feedback #6). */
  margin-top: auto;
}
/* Stretch the single link over the whole card so the entire card is clickable. */
.welcome2 .welcome2__dev-grid a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--w2-radius-app-card);
}
.welcome2 .welcome2__dev-grid li:hover a,
.welcome2 .welcome2__dev-grid a:hover {
  color: var(--w2-color-link-hover-soft);
  text-decoration: none;
}
.welcome2 .welcome2__dev-grid a:focus-visible::after {
  outline: 2px solid var(--w2-color-primary);
  outline-offset: -2px;
}

/* ---- Modal backdrop (shared dimming for dialogs; feedback #12) ----------- */

/* Reusable overlay for the upcoming modal dialogs (Apps / test-example /
   admin-panel). A dialog mounts inside it; toggling [hidden] shows/hides. */
.welcome2 .welcome2__overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--w2-color-blackout);
  z-index: 1000;
}
.welcome2 .welcome2__overlay[hidden] {
  display: none;
}

/* Dialog shell (DocSpace modal). max-width switches compact (520) vs wide (1024). */
.welcome2 .welcome2__modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 48px);
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.welcome2 .welcome2__modal--wide {
  max-width: 880px;
}

.welcome2 .welcome2__modal-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 54px;
  padding: 0 16px;
  border-bottom: 1px solid #eceef1;
}
.welcome2 .welcome2__modal-title {
  flex: 1 1 auto;
  margin: 0;
  font-size: 21px;
  line-height: 28px;
  font-weight: 700;
  color: var(--w2-color-heading);
}
.welcome2 .welcome2__modal-close {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  /* background-image (not mask) so the icon renders over file:// too; hover swaps to the #657077 variant (feedback #14). */
  background: transparent url('icon-close.svg') center / 17px 17px no-repeat;
}
.welcome2 .welcome2__modal-close:hover {
  background-image: url('icon-close-hover.svg');
}
.welcome2 .welcome2__modal-close:focus-visible {
  outline: 2px solid var(--w2-color-primary);
  outline-offset: -2px;
}

.welcome2 .welcome2__modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.welcome2 .welcome2__modal-foot {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px;
}

/* Install modal: Figma export shows an 8px bottom body padding, not the flat 16px. */
.welcome2 .welcome2__modal--install .welcome2__modal-body {
  padding-bottom: 8px;
}

/* Install modal: 5px keeps the field at the mockup's 32px (one line) and 52px (two lines). */
.welcome2 .welcome2__modal--install .welcome2__cmd pre {
  padding-top: 5px;
  padding-bottom: 5px;
}

/* Install modal: the copy icon sits centered in the field, not pinned to the top. */
.welcome2 .welcome2__modal--install .welcome2__copy {
  top: 50%;
  transform: translateY(-50%);
}

/* ---- Trial modal (Enterprise / Developer upgrade paths) ------------------ */

.welcome2 .welcome2__trial-offer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  background: var(--w2-color-warn-bg);
  border-radius: var(--w2-radius-card);
}
.welcome2 .welcome2__trial-offer-title {
  margin: 0;
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  color: var(--w2-color-heading);
}
.welcome2 .welcome2__trial-offer-desc {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--w2-color-heading);
}

.welcome2 .welcome2__trial-options {
  display: flex;
  align-items: stretch;
  gap: 16px;
}
.welcome2 .welcome2__trial-option {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 18px;
  background: var(--w2-color-warn-bg);
  border-radius: var(--w2-radius-card);
}
/* Grows so both CTAs sit on the card bottom edge whatever the copy height. */
.welcome2 .welcome2__trial-option-details {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.welcome2 .welcome2__trial-option-title {
  margin: 0;
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  color: var(--w2-color-heading);
}
.welcome2 .welcome2__trial-option-desc {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--w2-color-text);
}

.welcome2 .welcome2__trial-features {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.welcome2 .welcome2__trial-feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.welcome2 .welcome2__trial-feature-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--w2-radius-note);
  background: var(--w2-trial-tint);
}
.welcome2 .welcome2__trial-feature-icon img {
  display: block;
  width: 16px;
  height: 16px;
}
.welcome2 .welcome2__trial-feature-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.welcome2 .welcome2__trial-feature-title {
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  color: var(--w2-color-heading);
}
.welcome2 .welcome2__trial-feature-desc {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--w2-color-text);
}

.welcome2 .welcome2__trial-option--enterprise {
  --w2-trial-tint: rgba(71, 129, 209, 0.1);
}
/* Purple column: overriding the primary tokens keeps hover and active states in scheme. */
.welcome2 .welcome2__trial-option--developer {
  --w2-trial-tint: rgba(109, 78, 194, 0.1);
  --w2-color-primary: #8570bd;
  --w2-color-primary-hover: rgba(133, 112, 189, 0.85);
  --w2-color-primary-pressed: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), #8570bd;
}
.welcome2 .welcome2__trial-cta {
  width: 100%;
}

/* Grey info icon: this note states a consequence, not a warning. */
.welcome2 .welcome2__modal--trial .welcome2__note-icon {
  background-image: url('trial-info.svg');
}

.welcome2 .welcome2__trial-divider {
  height: 1px;
  background: #eceef1;
}

.welcome2 .welcome2__trial-links {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px;
  font-size: 13px;
  line-height: 20px;
  font-weight: 600;
  color: var(--w2-color-heading);
}
/* Underline drawn as a border so it lands exactly 1px under the 15px label, as in the mockup. */
.welcome2 .welcome2__trial-links a {
  padding-top: 2px;
  line-height: 15px;
  color: var(--w2-color-link);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.welcome2 .welcome2__trial-links a:hover {
  color: var(--w2-color-link-hover);
}

/* Narrow screens: the two upgrade paths stack instead of squeezing to half width. */
@media (max-width: 720px) {
  .welcome2 .welcome2__trial-options {
    flex-direction: column;
  }
}

/* Wide modal: hero + two-column promo (feature list + product screenshot). */
.welcome2 .welcome2__modal-hero {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.welcome2 .welcome2__modal-hero-title {
  margin: 0;
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  color: var(--w2-color-heading);
}
.welcome2 .welcome2__modal-hero-desc {
  margin: 0;
  font-size: 13px;
  line-height: 20px;
  color: var(--w2-color-text);
}
.welcome2 .welcome2__modal-promo {
  display: grid;
  /* Figma v7.1: points column 400px, then a 20px gap to the screenshot (starts at 420). */
  grid-template-columns: 400px 1fr;
  column-gap: 20px;
  row-gap: 16px;
  /* Top-align the columns; the screenshot keeps its own (taller) height and extends below the points toward the footer. */
  align-items: start;
}
.welcome2 .welcome2__feature-list {
  display: flex;
  flex-direction: column;
}
.welcome2 .welcome2__feature {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  /* 1px divider under each point (Light/gray/mid token); matches v7 mockup. */
  border-bottom: 1px solid #eceef1;
}
.welcome2 .welcome2__feature-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  /* Per-app accent; default gray, overridden by a .welcome2__modal--<app> modifier. */
  background: var(--w2-feat-bg, #eceef1);
  color: var(--w2-feat-fg, #555f65);
}
.welcome2 .welcome2__modal--app {
  --w2-feat-bg: rgba(34, 195, 134, 0.1);
  --w2-feat-fg: #22c386;
}
.welcome2 .welcome2__feature-icon svg,
.welcome2 .welcome2__feature-icon img {
  width: 16px;
  height: 16px;
  display: block;
}
.welcome2 .welcome2__feature-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.welcome2 .welcome2__feature-title {
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
  color: var(--w2-color-heading);
}
.welcome2 .welcome2__feature-desc {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  color: var(--w2-color-text);
}
.welcome2 .welcome2__modal-shot {
  position: relative;
  /* Bleed only to the dialog's right edge (the modal's overflow clips it there too). */
  margin: 0 -16px 0 0;
  /* Clip the screenshot's right + bottom bleed but leave room for the top + left shadow. */
  clip-path: inset(-16px 0 0 -20px);
}
.welcome2 .welcome2__modal-shot img {
  display: block;
  /* Natural size (x1 = 4x master / 4); the asset is taller than the points column,
     so it extends below them toward the footer, its bottom clipped by clip-path. */
  width: 444px;
  height: auto;
  /* Rounded top-left corner + soft shadow; clip-path keeps only the top + left edges. */
  border-radius: 8px 0 0 0;
  box-shadow:
    0 0 4px rgba(4, 15, 27, 0.04),
    0 8px 16px rgba(4, 15, 27, 0.08);
}

@media (max-width: 720px) {
  .welcome2 .welcome2__modal-promo {
    grid-template-columns: 1fr;
  }
  .welcome2 .welcome2__modal-shot {
    margin: 0;
    clip-path: none;
  }
  .welcome2 .welcome2__modal-shot img {
    width: 100%;
    height: auto;
  }
}

/* ---- Footer (document-flow block, NOT fixed/sticky) --------------------- */

.welcome2 .welcome2__footer {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  position: static;
}

.welcome2 .welcome2__footer-help {
  background: var(--w2-color-footer-bg);
  padding: 40px var(--w2-page-pad-x);
}
.welcome2 .welcome2__footer-help-inner {
  max-width: var(--w2-footer-content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.welcome2 .welcome2__footer-help-title {
  margin: 0;
  font-family: var(--w2-font);
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.02em;
  color: var(--w2-color-heading);
}
.welcome2 .welcome2__footer-help-desc {
  margin: 0;
  width: 468px;
  max-width: 100%;
  font-family: var(--w2-font);
  font-size: 14px;
  line-height: 27px;
  font-weight: 400;
  color: var(--w2-color-heading);
}
.welcome2 .welcome2__footer-help-desc a,
.welcome2 .welcome2__footer-help-desc a:visited {
  color: var(--w2-color-link);
  font-weight: 400;
  text-decoration: none;
}
.welcome2 .welcome2__footer-help-desc a:hover {
  color: var(--w2-color-link-hover);
  text-decoration: underline;
}

.welcome2 .welcome2__footer-band {
  background: var(--w2-color-footer-dark);
  padding: 24px var(--w2-page-pad-x);
}
.welcome2 .welcome2__footer-band-inner {
  max-width: var(--w2-footer-content-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  justify-content: space-between;
}
.welcome2 .welcome2__footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
}
.welcome2 .welcome2__footer-nav a,
.welcome2 .welcome2__footer-nav a:visited {
  color: var(--w2-color-footer-link);
  font-family: var(--w2-font);
  font-size: 14px;
  line-height: 16px;
  font-weight: 400;
  text-decoration: none;
}
.welcome2 .welcome2__footer-nav a:hover {
  text-decoration: underline;
  color: var(--w2-color-footer-link);
}
.welcome2 .welcome2__footer-copy {
  margin: 0;
  color: var(--w2-color-footer-dim);
  font-family: var(--w2-font);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  text-align: right;
}

/* ---- Responsive ---------------------------------------------------------- */

@media (max-width: 960px) {
  .welcome2 {
    --w2-page-pad-x: 20px;
  }
  .welcome2 .welcome2__app-grid,
  .welcome2 .welcome2__connector-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .welcome2 .welcome2__dev-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .welcome2 {
    --w2-page-pad-top: 32px;
    --w2-page-pad-bottom: 32px;
    --w2-gap-section: 24px;
  }
  .welcome2 .welcome2__title {
    font-size: 20px;
    line-height: 26px;
  }
  .welcome2 .welcome2__subtitle {
    font-size: 14px;
    line-height: 20px;
  }
  .welcome2 .welcome2__editor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .welcome2 .welcome2__app-grid,
  .welcome2 .welcome2__connector-grid,
  .welcome2 .welcome2__dev-grid {
    grid-template-columns: 1fr;
  }
  .welcome2 .welcome2__accordion-head {
    padding: 16px;
  }
  .welcome2 .welcome2__accordion-body {
    padding: 0 16px 16px;
  }
  .welcome2 .welcome2__cmd pre {
    padding: 6px 36px 6px 8px;
    font-size: 12px;
    line-height: 18px;
  }
  .welcome2 .welcome2__footer-help {
    padding: 32px var(--w2-page-pad-x);
  }
  .welcome2 .welcome2__footer-band-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .welcome2 .welcome2__footer-copy {
    text-align: left;
  }
}