.browser-downloads {
  padding: 68px 0;
  border-bottom: 1px dashed #303030;
}
.browser-downloads .section-head { max-width: 760px; margin-bottom: 30px; }
.browser-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-inline-start: 1px solid var(--line);
}
.browser-card {
  min-width: 0;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 21px;
  border-inline-end: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.browser-card[data-status="available"] { border-top: 2px solid var(--brand); padding-top: 20px; }
.browser-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.browser-identity { min-width: 0; display: flex; align-items: center; gap: 11px; }
.browser-mark {
  width: 35px;
  height: 35px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: transparent;
  background: transparent;
  font-size: 0;
  overflow: hidden;
}
.browser-mark::before {
  content: "";
  width: 21px;
  height: 21px;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.browser-card[data-browser-card="chrome"] .browser-mark::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300e5b0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M12 3h7M12 12 7.2 4.2M12 12h9M12 12l-4.6 8'/%3E%3C/svg%3E");
}
.browser-card[data-browser-card="firefox"] .browser-mark::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300e5b0'%3E%3Cpath d='M8.824 7.287c.008 0 .004 0 0 0zm-2.8-1.4c.006 0 .003 0 0 0zm16.754 2.161c-.505-1.215-1.53-2.528-2.333-2.943.654 1.283 1.033 2.57 1.177 3.53l.002.02c-1.314-3.278-3.544-4.6-5.366-7.477-.091-.147-.184-.292-.273-.446a3.545 3.545 0 0 1-.13-.24 2.118 2.118 0 0 1-.172-.46.03.03 0 0 0-.027-.03.038.038 0 0 0-.021 0l-.006.001a.037.037 0 0 0-.01.005L15.624 0c-2.585 1.515-3.657 4.168-3.932 5.856a6.197 6.197 0 0 0-2.305.587.297.297 0 0 0-.147.37c.057.162.24.24.396.17a5.622 5.622 0 0 1 2.008-.523l.067-.005a5.847 5.847 0 0 1 1.957.222l.095.03a5.816 5.816 0 0 1 .616.228c.08.036.16.073.238.112l.107.055a5.835 5.835 0 0 1 .368.211 5.953 5.953 0 0 1 2.034 2.104c-.62-.437-1.733-.868-2.803-.681 4.183 2.09 3.06 9.292-2.737 9.02a5.164 5.164 0 0 1-1.513-.292 4.42 4.42 0 0 1-.538-.232c-1.42-.735-2.593-2.121-2.74-3.806 0 0 .537-2 3.845-2 .357 0 1.38-.998 1.398-1.287-.005-.095-2.029-.9-2.817-1.677-.422-.416-.622-.616-.8-.767a3.47 3.47 0 0 0-.301-.227 5.388 5.388 0 0 1-.032-2.842c-1.195.544-2.124 1.403-2.8 2.163h-.006c-.46-.584-.428-2.51-.402-2.913-.006-.025-.343.176-.389.206-.406.29-.787.616-1.136.974-.397.403-.76.839-1.085 1.303a9.816 9.816 0 0 0-1.562 3.52c-.003.013-.11.487-.19 1.073-.013.09-.026.181-.037.272a7.8 7.8 0 0 0-.069.667l-.002.034-.023.387-.001.06C.386 18.795 5.593 24 12.016 24c5.752 0 10.527-4.176 11.463-9.661.02-.149.035-.298.052-.448.232-1.994-.025-4.09-.753-5.844z'/%3E%3C/svg%3E");
}
.browser-card[data-browser-card="edge"] .browser-mark::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300e5b0'%3E%3Cpath d='M4 13c.7-5 4.1-8 8.6-8 4.1 0 7.4 2.8 7.4 6.6 0 .7-.1 1.3-.2 1.9H8.1c.6 2.5 2.7 4.1 5.7 4.1 2 0 3.7-.6 5.1-1.7-1.3 2.7-4 4.4-7.2 4.4C7.2 20.3 4 17.4 4 13Zm4.2-2.4h7.5c-.4-1.7-1.8-2.8-3.7-2.8-1.8 0-3.2 1-3.8 2.8Z'/%3E%3C/svg%3E");
}
.browser-card[data-browser-card="brave"] .browser-mark::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300e5b0' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8 18 5l2 4-1.3 8L12 21l-6.7-4L4 9l2-4 6-2.2Z'/%3E%3Cpath d='m8.3 10 1.8-1.7L12 10l1.9-1.7 1.8 1.7-.8 5.7L12 17.6l-2.9-1.9-.8-5.7Z'/%3E%3Cpath d='M9.8 12.4h.1M14.1 12.4h.1'/%3E%3C/svg%3E");
}
.browser-name { min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.3; }
.browser-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--faint);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  white-space: nowrap;
}
.browser-status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.browser-card[data-status="available"] .browser-status { border-color: rgba(0,229,176,.42); color: var(--brand); }
.browser-version { color: var(--faint); font-family: var(--font-mono); font-size: 11px; font-variant-numeric: tabular-nums; }
.browser-note { min-height: 44px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.browser-card .button { width: 100%; margin-top: auto; }
.browser-card .button[aria-disabled="true"] { border-color: var(--line); background: transparent; color: #686868; cursor: not-allowed; }
html[dir="rtl"] .browser-mark,
html[dir="rtl"] .browser-name,
html[dir="rtl"] .browser-status { letter-spacing: 0; }

/* Homepage product preview: compact site mockup, intentionally simpler than the live extension UI. */
.current-product-stage {
  position: relative;
  min-width: 0;
  padding: 0 0 52px 28px;
}
.current-workspace-preview {
  position: relative;
  overflow: hidden;
  min-height: 430px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #121212;
}
.wallpaper-preview-panel {
  position: absolute;
  z-index: 3;
  inset-inline-start: 0;
  bottom: 0;
  width: min(248px, 44%);
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #151515;
}
.wallpaper-preview-head {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  margin-bottom: 11px;
}
.wallpaper-preview-title {
  color: #f0f0f0;
  font-size: 11px;
  font-weight: 600;
}
.wallpaper-preview-upload {
  color: var(--brand);
  font-size: 8px;
  font-weight: 600;
  white-space: nowrap;
}
.wallpaper-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 12px;
}
.wallpaper-preview-thumb {
  aspect-ratio: 1.7;
  border: 1px solid #333;
  border-radius: 4px;
  background: #1d1d1d;
}
.wallpaper-preview-thumb.active {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px rgba(0,229,176,.16);
}
.wallpaper-controls {
  padding-top: 10px;
  border-top: 1px solid #2b2b2b;
}
.wallpaper-control-row {
  min-height: 32px;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 8px;
}
.wallpaper-control-row + .wallpaper-control-row { margin-top: 6px; }
.wallpaper-control-label {
  color: #a9a9a9;
  font-size: 8px;
  font-weight: 600;
}
.wallpaper-layout-row,
.wallpaper-density-options {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #303030;
  border-radius: 5px;
  background: #111;
}
.wallpaper-layout-row span,
.wallpaper-density-options span {
  min-width: 0;
  min-height: 26px;
  display: grid;
  place-items: center;
  border-inline-start: 1px solid #303030;
  color: #777;
  font-family: var(--font-mono);
  font-size: 7px;
}
.wallpaper-layout-row span:first-child,
.wallpaper-density-options span:first-child { border-inline-start: 0; }
.wallpaper-layout-row span.active,
.wallpaper-density-options span.active {
  color: var(--brand-light);
  background: rgba(0,229,176,.10);
}

@media (max-width: 980px) {
  .browser-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wallpaper-preview-panel { width: min(240px, 47%); }
}
@media (max-width: 760px) {
  .current-product-stage { padding-inline-start: 0; padding-bottom: 0; }
  .wallpaper-preview-panel {
    position: relative;
    inset: auto;
    width: 100%;
    margin-top: 12px;
  }
}
@media (max-width: 600px) {
  .browser-downloads { padding: 52px 0; }
  .browser-grid { grid-template-columns: 1fr; }
  .browser-card { min-height: 0; padding: 19px; }
  .browser-card[data-status="available"] { padding-top: 18px; }
  .browser-note { min-height: 0; }
  .wallpaper-preview-panel { padding: 12px; }
  .wallpaper-control-row { grid-template-columns: 56px minmax(0, 1fr); }
}