:root {
  --navy: #102047;
  --navy-deep: #0a1736;

  --blue: #345cff;
  --purple: #6551d8;
  --green: #0f9c62;
  --orange: #f17c2d;
  --teal: #19a8c7;
  --pink: #f14461;

  --text: #16213d;
  --muted: #667087;

  --page: #f7f9fd;
  --surface: #ffffff;
  --surface-soft: #f3f6fb;

  --border: #dfe5ef;

  --shadow:
    0 14px 40px rgba(28, 48, 91, 0.08);

  --card-shadow:
    0 8px 22px rgba(28, 48, 91, 0.07);
}


/* RESET */

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color: var(--text);
  background: var(--page);
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.hidden {
  display: none !important;
}


/* APP */

.app-shell {
  min-height: 100vh;
  display: flex;
}


/* SIDEBAR */

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;

  width: 268px;
  padding: 28px 18px 22px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  color: white;

  background:
    radial-gradient(
      circle at top left,
      rgba(72, 103, 255, 0.16),
      transparent 35%
    ),
    linear-gradient(
      180deg,
      var(--navy),
      var(--navy-deep)
    );
}


/* WORDMARK */

.brand {
  display: flex;
  justify-content: center;
  margin-bottom: 42px;
}

.brand-wordmark {
  width: 190px;

  display: flex;
  flex-direction: column;

  gap: 5px;
}

.wordmark-pill {
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 24px;

  font-size: 18px;
  font-weight: 800;
}

.wordmark-top {
  color: white;

  background: #142652;

  border: 2px solid #315cff;
}

.wordmark-bottom {
  color: white;

  background:
    linear-gradient(
      135deg,
      #335dff,
      #2348d8
    );

  border: 2px solid #4f73ff;

  font-size: 20px;
  letter-spacing: 3px;
}


/* NAVIGATION */

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-item {
  width: 100%;

  border: 0;
  border-radius: 11px;

  padding: 14px 16px;

  display: flex;
  align-items: center;

  gap: 14px;

  color: rgba(255, 255, 255, 0.82);
  background: transparent;

  text-align: left;
}

.nav-item:hover {
  color: white;

  background:
    rgba(255, 255, 255, 0.08);
}

.nav-item.active {
  color: white;

  background:
    linear-gradient(
      135deg,
      rgba(78, 102, 202, 0.72),
      rgba(55, 79, 164, 0.72)
    );
}

.nav-icon {
  width: 22px;

  text-align: center;

  font-size: 20px;
}


/* SIDEBAR BOTTOM */

.sidebar-quote {
  padding: 0 24px 28px;

  color: rgba(255, 255, 255, 0.88);
}

.quote-mark {
  margin-bottom: 8px;

  color: #4b6cff;

  font-size: 48px;
  line-height: 0.8;
}

.sidebar-quote p {
  margin: 5px 0;

  font-size: 16px;
}

.sidebar-footer {
  padding: 0 12px;

  color: rgba(255, 255, 255, 0.58);

  font-size: 12px;
}


/* MAIN */

.main-area {
  width: 100%;

  margin-left: 268px;

  min-height: 100vh;

  padding: 24px 44px 45px;
}


/* TOP BAR */

.topbar {
  min-height: 46px;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.back-button,
.theme-toggle {
  border: 1px solid var(--border);
  border-radius: 11px;

  padding: 10px 14px;

  color: var(--text);

  background: var(--surface);

  box-shadow:
    0 5px 14px rgba(20, 36, 74, 0.05);
}

.theme-toggle {
  margin-left: auto;
}


/* PAGES */

.page {
  display: none;
}

.active-page {
  display: block;
}


/* HOME HERO */

.hero {
  max-width: 900px;

  margin: 2px auto 26px;

  text-align: center;
}

.hero h1 {
  margin: 0;

  font-size: clamp(34px, 4vw, 48px);

  line-height: 1.1;

  letter-spacing: -1.5px;
}

.hero h1 span {
  color: var(--blue);
}

.hero p {
  margin: 13px 0 0;

  font-size: 19px;
}


/* FEATURED WORKSPACES */

.workspace-section {
  max-width: 1120px;

  margin: 0 auto;
}

.workspace-section h2 {
  margin: 0;

  text-align: center;

  font-size: 25px;
}

.heading-line {
  width: 74px;
  height: 4px;

  margin: 15px auto 28px;

  border-radius: 99px;

  background:
    linear-gradient(
      90deg,
      #633dff,
      #4c7cff
    );
}

.workspace-grid {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 18px;
}

.workspace-card {
  min-height: 250px;

  padding: 24px;

  display: flex;
  flex-direction: column;
  align-items: center;

  border: 1px solid transparent;
  border-radius: 18px;

  box-shadow: var(--card-shadow);

  text-align: center;

  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.workspace-card:hover {
  transform: translateY(-4px);

  box-shadow:
    0 16px 30px rgba(28, 48, 91, 0.11);
}

.workspace-icon {
  width: 68px;
  height: 68px;

  margin-bottom: 14px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  font-size: 31px;
  font-weight: 700;
}

.workspace-card h3 {
  margin: 0 0 10px;

  font-size: 19px;
}

.workspace-card p {
  max-width: 285px;

  margin: 0 auto 18px;

  flex: 1;

  color: #222a41;

  font-size: 14px;
  line-height: 1.55;
}

.create-button {
  min-width: 175px;

  border: 0;
  border-radius: 7px;

  padding: 10px 17px;

  color: white;

  font-weight: 700;
}


/* FEATURE CARD COLOURS */

.card-house {
  border-color: #bdd0ff;
  background: linear-gradient(145deg, #fff, #eef4ff);
}

.icon-house {
  color: #275cff;
  background: #dce7ff;
}

.button-house {
  background: #335dff;
}


.card-work {
  border-color: #c9c5fa;
  background: linear-gradient(145deg, #fff, #f2f0ff);
}

.icon-work {
  color: var(--purple);
  background: #e4e0ff;
}

.button-work {
  background: var(--purple);
}


.card-money {
  border-color: #b9e7d1;
  background: linear-gradient(145deg, #fff, #ebfaf3);
}

.icon-money {
  color: var(--green);
  background: #d4f5e4;
}

.button-money {
  background: var(--green);
}


.card-change {
  border-color: #ffd4aa;
  background: linear-gradient(145deg, #fff, #fff4e9);
}

.icon-change {
  color: var(--orange);
  background: #ffe6cf;
}

.button-change {
  background: var(--orange);
}


.card-affairs {
  border-color: #bee7f2;
  background: linear-gradient(145deg, #fff, #edfaff);
}

.icon-affairs {
  color: var(--teal);
  background: #d9f3f9;
}

.button-affairs {
  background: var(--teal);
}


.card-project {
  border-color: #f6cbd1;
  background: linear-gradient(145deg, #fff, #fff0f2);
}

.icon-project {
  color: var(--pink);
  background: #ffe0e5;
}

.button-project {
  background: var(--pink);
}


.card-other {
  grid-column: 2;

  border-style: dashed;
  border-color: #c8cedc;

  background:
    linear-gradient(145deg, #fff, #f5f6fa);
}

.icon-other {
  color: #59647d;

  background: #e7eaf0;
}

.button-other {
  background: #59647d;
}


/* BENEFITS */

.benefits {
  max-width: 1120px;

  margin: 26px auto 0;

  padding: 18px 20px;

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  border: 1px solid var(--border);
  border-radius: 16px;

  background: var(--surface);

  box-shadow: var(--shadow);
}

.benefit {
  padding: 0 20px;

  display: flex;

  gap: 13px;

  border-right:
    1px solid var(--border);
}

.benefit:last-child {
  border-right: 0;
}

.benefit-icon {
  width: 38px;
  height: 38px;

  flex: 0 0 auto;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color: var(--blue);

  background: var(--surface-soft);
}

.benefit h4 {
  margin: 1px 0 6px;
}

.benefit p {
  margin: 0;

  color: var(--muted);

  font-size: 12.5px;
}

.closing-line {
  margin-top: 29px;

  text-align: center;

  color: #536eff;

  font-family:
    "Segoe Print",
    "Bradley Hand",
    cursive;

  font-size: 19px;

  font-style: italic;
}


/* CATALOGUE */

.catalogue-hero {
  max-width: 850px;

  margin: 10px auto 28px;

  text-align: center;
}

.catalogue-kicker,
.sample-category,
.panel-kicker {
  color: #4969ef;

  font-size: 12px;
  font-weight: 800;

  letter-spacing: 0.7px;

  text-transform: uppercase;
}

.catalogue-hero h1 {
  margin: 8px 0;

  font-size: 43px;

  letter-spacing: -1.3px;
}

.catalogue-hero p {
  margin: 0;

  color: var(--muted);

  font-size: 18px;
}


/* FILTERS */

.catalogue-filters {
  max-width: 1120px;

  margin: 0 auto 24px;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  gap: 8px;
}

.filter-button {
  border:
    1px solid var(--border);

  border-radius: 999px;

  padding: 9px 14px;

  color: var(--muted);

  background: var(--surface);
}

.filter-button:hover {
  color: var(--blue);

  border-color: #bbc8ff;
}

.filter-button.active {
  color: white;

  border-color: var(--blue);

  background: var(--blue);
}


/* SAMPLE CATALOGUE CARDS */

.sample-workspace-grid {
  max-width: 1120px;

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 18px;
}

.sample-card {
  min-height: 245px;

  padding: 22px;

  display: flex;
  flex-direction: column;

  border:
    1px solid var(--border);

  border-radius: 18px;

  background: var(--surface);

  box-shadow: var(--card-shadow);

  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.sample-card:hover {
  transform: translateY(-4px);

  box-shadow:
    0 16px 30px rgba(28, 48, 91, 0.11);
}

.sample-card-top {
  display: flex;
  align-items: center;

  gap: 12px;

  margin-bottom: 15px;
}

.sample-card-icon {
  width: 47px;
  height: 47px;

  display: grid;
  place-items: center;

  border-radius: 14px;

  color: var(--blue);

  background: #e7edff;

  font-size: 22px;
  font-weight: 800;
}

.sample-card-category {
  color: #71809a;

  font-size: 11px;
  font-weight: 800;

  text-transform: uppercase;
}

.sample-card h3 {
  margin: 0 0 9px;

  font-size: 19px;
}

.sample-card p {
  margin: 0 0 18px;

  flex: 1;

  color: var(--muted);

  font-size: 13.5px;
  line-height: 1.55;
}

.preview-button {
  width: 100%;

  border:
    1px solid #cdd7ff;

  border-radius: 9px;

  padding: 10px;

  color: var(--blue);

  background: #f2f5ff;

  font-weight: 800;
}

.preview-button:hover {
  color: white;

  background: var(--blue);
}


/* START BLANK */

.blank-workspace-panel {
  max-width: 850px;

  margin: 28px auto 0;

  padding: 22px;

  display: grid;

  grid-template-columns:
    55px
    1fr
    auto;

  align-items: center;

  gap: 18px;

  border:
    1px dashed #b9c1d2;

  border-radius: 18px;

  background: var(--surface);
}

.blank-symbol {
  width: 52px;
  height: 52px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color: #59647d;

  background: #eef1f5;

  font-size: 28px;
}

.blank-workspace-panel h3 {
  margin: 0 0 5px;
}

.blank-workspace-panel p {
  margin: 0;

  color: var(--muted);
}

.blank-workspace-button {
  border: 0;
  border-radius: 9px;

  padding: 11px 18px;

  color: white;

  background: #59647d;

  font-weight: 800;
}


/* SAMPLE WORKSPACE */

.sample-header {
  max-width: 1120px;

  margin: 10px auto 24px;

  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  gap: 30px;
}

.sample-header h1 {
  margin: 6px 0 8px;

  font-size: 42px;

  letter-spacing: -1.3px;
}

.sample-header p {
  max-width: 680px;

  margin: 0;

  color: var(--muted);

  font-size: 17px;
  line-height: 1.5;
}

.sample-badge {
  flex: 0 0 auto;

  border-radius: 999px;

  padding: 9px 14px;

  color: #4969ef;

  background: #e9efff;

  font-size: 12px;
  font-weight: 800;
}


/* SUMMARY */

.sample-summary {
  max-width: 1120px;

  margin: 0 auto 20px;

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 14px;
}

.summary-card {
  padding: 18px;

  border:
    1px solid var(--border);

  border-radius: 15px;

  background: var(--surface);

  box-shadow: var(--card-shadow);

  text-align: center;
}

.summary-number {
  display: block;

  color: var(--blue);

  font-size: 28px;
  font-weight: 800;
}

.summary-label {
  color: var(--muted);

  font-size: 12px;
  font-weight: 700;
}


/* SAMPLE PANELS */

.sample-layout,
.sample-bottom-grid {
  max-width: 1120px;

  margin: 0 auto 18px;

  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 18px;
}

.sample-panel {
  padding: 22px;

  border:
    1px solid var(--border);

  border-radius: 18px;

  background: var(--surface);

  box-shadow: var(--card-shadow);
}

.panel-heading {
  margin-bottom: 16px;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panel-heading h2 {
  margin: 4px 0 0;

  font-size: 21px;
}

.attention-dot {
  width: 10px;
  height: 10px;

  border-radius: 50%;

  background: #ff6c55;

  box-shadow:
    0 0 0 6px rgba(255, 108, 85, 0.12);
}


/* SAMPLE LIST */

.sample-list,
.mini-list {
  display: flex;
  flex-direction: column;

  gap: 10px;
}

.sample-list-item,
.mini-list-item {
  padding: 13px;

  border:
    1px solid #e7eaf1;

  border-radius: 11px;

  background: #fafbfe;
}

.sample-list-title {
  margin-bottom: 4px;

  font-weight: 800;
}

.sample-list-note {
  color: var(--muted);

  font-size: 12.5px;
  line-height: 1.45;
}

.status-pill {
  display: inline-block;

  margin-top: 7px;

  padding: 4px 8px;

  border-radius: 999px;

  color: #315cff;

  background: #e7edff;

  font-size: 10px;
  font-weight: 800;

  text-transform: uppercase;
}

.mini-list-item {
  display: flex;
  align-items: center;

  gap: 10px;

  font-size: 13px;
  font-weight: 700;
}

.mini-icon {
  width: 32px;
  height: 32px;

  display: grid;
  place-items: center;

  flex: 0 0 auto;

  border-radius: 9px;

  color: var(--blue);

  background: #e7edff;
}

.sample-footer-message {
  max-width: 900px;

  margin: 28px auto 0;

  padding: 17px 20px;

  border-radius: 14px;

  color: #43516f;

  background: #edf2ff;

  text-align: center;
}


/* WORKSPACE ITEM CONTROLS */

.workspace-row-actions {
  margin-top: 10px;

  display: flex;

  gap: 8px;
}

.workspace-edit-button,
.workspace-delete-button,
.workspace-done-button,
.workspace-save-button,
.workspace-cancel-button,
.open-local-file-button {
  border-radius: 8px;

  padding: 7px 11px;

  font-weight: 700;
}

.workspace-edit-button {
  border:
    1px solid #cdd7ff;

  color: var(--blue);

  background: #f2f5ff;
}

.workspace-edit-button:hover {
  color: white;

  background: var(--blue);
}

.workspace-delete-button {
  border:
    1px solid #e3d4d8;

  color: #a13d50;

  background: #fff6f7;
}

.workspace-delete-button:hover {
  color: white;

  border-color: #a13d50;

  background: #a13d50;
}

.workspace-done-button {
  border:
    1px solid #bfe3d1;

  color: #14784e;

  background: #edf9f3;
}

.workspace-done-button:hover {
  color: white;

  border-color: var(--green);

  background: var(--green);
}


/* GENERIC WORKSPACE EDITOR */

.workspace-inline-editor {
  margin-top: 10px;

  padding: 16px;

  border:
    1px solid #d8e0f0;

  border-radius: 12px;

  background: #f8faff;
}

.workspace-editor-title {
  margin-bottom: 14px;

  font-size: 15px;
  font-weight: 800;
}

.workspace-field-label {
  display: block;

  margin-bottom: 5px;

  font-size: 12px;
  font-weight: 800;
}

.workspace-field {
  width: 100%;

  margin-bottom: 12px;

  border:
    1px solid #ccd5e6;

  border-radius: 8px;

  padding: 10px 11px;

  color: var(--text);

  background: var(--surface);
}

textarea.workspace-field {
  min-height: 84px;

  resize: vertical;
}

.workspace-field:focus {
  outline: none;

  border-color: #7791ff;

  box-shadow:
    0 0 0 3px rgba(52, 92, 255, 0.1);
}


/* NEEDS ATTENTION CHECKBOX */

.workspace-attention-check {
  margin: 2px 0 16px;

  padding: 11px 12px;

  display: flex;
  align-items: center;

  gap: 10px;

  border:
    1px solid #d7def0;

  border-radius: 9px;

  color: #3d4964;

  background: #f4f7ff;

  font-size: 13px;
  font-weight: 800;

  cursor: pointer;
}

.workspace-attention-check input {
  width: 18px;
  height: 18px;

  margin: 0;

  accent-color: var(--blue);

  cursor: pointer;
}

.workspace-attention-check:hover {
  border-color: #b8c6ff;

  background: #edf2ff;
}


.workspace-editor-actions {
  display: flex;

  gap: 8px;

  margin-top: 2px;
}

.workspace-save-button {
  border: 0;

  color: white;

  background: var(--blue);
}

.workspace-save-button:hover {
  background: #294de0;
}

.workspace-cancel-button {
  border:
    1px solid #d4dbe8;

  color: #59647d;

  background: var(--surface);
}

.workspace-cancel-button:hover {
  border-color: #adb8ca;

  background: var(--surface-soft);
}


/* LOCAL FILES */

.local-file-details {
  flex: 1;

  min-width: 0;
}

.local-file-meta {
  margin-top: 3px;

  color: #7b8499;

  font-size: 11px;
  font-weight: 500;
}

.open-local-file-button {
  border:
    1px solid #cdd7ff;

  color: var(--blue);

  background: #f2f5ff;
}

.open-local-file-button:hover {
  color: white;

  background: var(--blue);
}


/* HELP */

.help-page {
  max-width: 1120px;

  margin: 10px auto 0;
}

.help-hero {
  max-width: 800px;

  margin: 0 auto 30px;

  text-align: center;
}

.help-hero h1 {
  margin: 8px 0 10px;

  font-size: 42px;

  letter-spacing: -1.3px;
}

.help-hero p {
  margin: 0;

  color: var(--muted);

  font-size: 18px;
  line-height: 1.55;
}

.help-grid {
  display: grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap: 18px;
}

.help-card {
  padding: 24px;

  border:
    1px solid var(--border);

  border-radius: 18px;

  background: var(--surface);

  box-shadow: var(--card-shadow);
}

.help-number {
  width: 38px;
  height: 38px;

  margin-bottom: 14px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color: var(--blue);

  background: #e7edff;

  font-weight: 800;
}

.help-card h2 {
  margin: 0 0 11px;

  font-size: 20px;
}

.help-card p {
  margin: 0 0 10px;

  color: var(--muted);

  line-height: 1.55;
}

.help-card p:last-child {
  margin-bottom: 0;
}

.help-card ul {
  margin: 12px 0 0;

  padding-left: 20px;

  color: var(--muted);
}

.help-card li {
  margin-bottom: 8px;

  line-height: 1.45;
}

.help-closing {
  max-width: 760px;

  margin: 28px auto 0;

  padding: 18px 22px;

  display: flex;
  justify-content: center;

  gap: 8px;

  border-radius: 14px;

  color: #43516f;

  background: #edf2ff;

  text-align: center;
}


/* PLACEHOLDER */

.placeholder-card {
  max-width: 700px;

  margin: 90px auto 0;

  padding: 48px;

  border:
    1px solid var(--border);

  border-radius: 24px;

  background: var(--surface);

  box-shadow: var(--shadow);

  text-align: center;
}

.placeholder-card p {
  color: var(--muted);
}


/* TOAST */

.toast {
  position: fixed;

  right: 28px;
  bottom: 28px;

  max-width: 360px;

  padding: 14px 18px;

  border-radius: 12px;

  color: white;

  background: #16244c;

  opacity: 0;

  transform: translateY(14px);

  pointer-events: none;

  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.toast.show {
  opacity: 1;

  transform: translateY(0);
}


/* DARK MODE */

body.dark-mode {
  --text: #f4f6fb;
  --muted: #aab4c8;

  --page: #0f1729;
  --surface: #162038;
  --surface-soft: #1d2944;

  --border: #2a3857;
}

body.dark-mode .workspace-card {
  background: #17223a;
}

body.dark-mode .workspace-card p {
  color: #d7ddeb;
}

body.dark-mode .sample-list-item,
body.dark-mode .mini-list-item {
  border-color: #293651;

  background: #1b2740;
}

body.dark-mode .sample-footer-message,
body.dark-mode .help-closing {
  color: #cad5ee;

  background: #1b2a4d;
}

body.dark-mode .workspace-inline-editor {
  border-color: #334362;

  background: #1a2640;
}

body.dark-mode .workspace-field {
  color: var(--text);

  border-color: #394864;

  background: #121d33;
}

body.dark-mode .workspace-edit-button,
body.dark-mode .open-local-file-button {
  color: #8da4ff;

  border-color: #40517b;

  background: #1c2948;
}

body.dark-mode .workspace-cancel-button {
  color: #c2cad8;

  border-color: #394864;

  background: #162038;
}

body.dark-mode .workspace-delete-button {
  color: #ffabb9;

  border-color: #683d49;

  background: #321e28;
}

body.dark-mode .workspace-done-button {
  color: #8ee0b8;

  border-color: #315d49;

  background: #163326;
}

body.dark-mode .workspace-attention-check {
  color: #d6deef;

  border-color: #394864;

  background: #1c2948;
}

body.dark-mode .workspace-attention-check:hover {
  border-color: #506691;

  background: #213053;
}


/* RESPONSIVE */

@media (max-width: 1100px) {

  .workspace-grid,
  .sample-workspace-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .card-other {
    grid-column: auto;
  }

  .benefits {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .sample-summary {
    grid-template-columns:
      repeat(2, 1fr);
  }
}


@media (max-width: 800px) {

  .sidebar {
    position: static;

    width: 100%;

    min-height: auto;
  }

  .sidebar-bottom {
    display: none;
  }

  .main-area {
    margin-left: 0;

    padding: 18px;
  }

  .workspace-grid,
  .sample-workspace-grid,
  .sample-layout,
  .sample-bottom-grid,
  .benefits,
  .help-grid {
    grid-template-columns: 1fr;
  }

  .blank-workspace-panel {
    grid-template-columns: 1fr;

    text-align: center;
  }

  .blank-symbol {
    margin: auto;
  }

  .sample-header {
    display: block;
  }

  .sample-badge {
    display: inline-block;

    margin-top: 15px;
  }

  .sample-summary {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .help-closing {
    flex-direction: column;
  }
}