/* ==========================================================================
   CSS Variables & Theme
   ========================================================================== */
:root {
  --bg: #f3faf6;
  --ink: #081d17;
  --muted: #4b665c;
  --green: #007855;
  --green-dark: #006a4a;
  --green-soft: #d9f2e1;
  --border: #d5e4dc;
  --white: #ffffff;
  --shadow: 0 12px 30px rgba(18, 69, 48, 0.10);
}

/* ==========================================================================
   Reset & Base Styles
   ========================================================================== */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 3px solid #36ae82;
  outline-offset: 3px;
}

a {
  color: inherit;
  text-decoration: none;
}

[hidden] {
  display: none !important;
}

.wrap {
  width: min(100% - 116px, 1330px);
  margin: 0 auto;
}

.icon {
  display: inline-block;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  vertical-align: middle;
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  position: relative;
  z-index: 2;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 750;
  color: #091a14;
  font-size: 22px;
  letter-spacing: -0.055em;
}

.brand-icon {
  width: 32px;
  height: 32px;
  border-radius: 11px;
  background: var(--green);
  display: grid;
  place-items: center;
  color: var(--white);
}

.brand-dot {
  color: var(--green);
}

.top-nav {
  display: flex;
  align-items: center;
  gap: 36px;
  margin-left: 12%;
}

.top-nav a,
.help-trigger {
  font-size: 13px;
  font-weight: 500;
  color: #3d554c;
  transition: color 0.15s;
}

.top-nav a:hover,
.help-trigger:hover {
  color: var(--green);
}

.help-trigger {
  border: 0;
  background: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
}

/* ==========================================================================
   Hero Section & Visual Rings
   ========================================================================== */
.hero-shell {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.rings {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: -425px;
  top: 64px;
  width: 690px;
  height: 580px;
  border: 1px solid rgba(0, 120, 85, 0.13);
  border-radius: 50%;
}

.rings::before {
  content: "";
  position: absolute;
  width: 460px;
  height: 390px;
  left: 105px;
  top: 74px;
  border: 1px solid rgba(0, 120, 85, 0.13);
  border-radius: 50%;
}

.hero {
  min-height: calc(100svh - 68px);
  padding: 65px 0 90px;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(410px, 1fr);
  gap: clamp(40px, 7vw, 108px);
  align-items: center;
}

.hero-copy {
  align-self: center;
  padding-bottom: 12px;
}

.eyebrow {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  color: var(--green);
  font-size: 10px;
  font-weight: 780;
  letter-spacing: 0.15em;
}

.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--green);
  border-radius: 50%;
}

h1 {
  font-size: clamp(55px, 5.55vw, 80px);
  line-height: 1.015;
  letter-spacing: -0.068em;
  font-weight: 520;
  margin: 27px 0 18px;
  max-width: 620px;
}

h1 span {
  color: var(--green);
}

.description {
  max-width: 520px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
}

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 26px;
}

.social-pill {
  background: rgba(255, 255, 255, 0.80);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 11px;
  display: inline-flex;
  gap: 7px;
  align-items: center;
  color: #131d1a;
  font-size: 11px;
  font-weight: 560;
  transition: 0.18s ease;
}

.social-pill:hover,
.social-pill:focus-visible {
  background: var(--green-soft);
  border-color: #85cda7;
  transform: translateY(-1px);
}

.social-mark {
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  font-size: 15px;
  line-height: 1;
}

.insta-mark {
  color: #dd1479;
}

.youtube-mark {
  color: #ee3333;
}

.facebook-mark {
  color: #0b64bd;
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: 900;
}

.privacy-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  font-size: 11px;
  color: #547267;
}

.privacy-line svg {
  color: var(--green);
}

/* ==========================================================================
   Link Input Card & Form
   ========================================================================== */
.link-card {
  background: var(--white);
  border-radius: 21px;
  border: 1px solid #d5e4db;
  box-shadow: var(--shadow);
  padding: 28px 29px 27px;
  width: 100%;
  max-width: 535px;
  justify-self: end;
}

.card-kicker {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.card-kicker > span:first-child {
  color: var(--green);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.15em;
}

.private-tag {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  border-radius: 999px;
  background: var(--green-soft);
  color: #006c4a;
  padding: 6px 9px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.07em;
}

.private-tag .icon {
  width: 12px;
  height: 12px;
}

.link-card h2 {
  font-size: 21px;
  font-weight: 560;
  letter-spacing: -0.045em;
  margin: 13px 0 24px;
}

.form-label {
  display: block;
  margin-bottom: 9px;
  font-size: 11px;
  font-weight: 510;
}

.url-field {
  display: flex;
  min-width: 0;
  gap: 10px;
  align-items: center;
  height: 49px;
  border: 1px solid #cfddd6;
  border-radius: 10px;
  background: #fbfdfc;
  padding: 0 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.url-field:focus-within {
  border-color: #4bb48b;
  box-shadow: 0 0 0 3px rgba(0, 120, 85, 0.09);
}

.url-field > svg {
  color: #567268;
  width: 18px;
  height: 18px;
}

#video-url {
  min-width: 0;
  flex: 1;
  padding: 12px 0;
  border: none;
  background: transparent;
  outline: 0;
  font-size: 12px;
  color: #153328;
}

#video-url::placeholder {
  color: #9caeaa;
}

.clear-button {
  background: none;
  border: none;
  color: #7b948a;
  font-size: 13px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clear-button:hover {
  color: #ba2828;
  background: rgba(186, 40, 40, 0.08);
}

.paste-button {
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 0 8px 7px;
  background: none;
  border: none;
  font-size: 11px;
  font-weight: 620;
}

.paste-button:hover {
  color: #005c40;
}

.paste-button .icon {
  width: 15px;
  height: 15px;
}

.fine-print {
  color: #70877e;
  font-size: 10px;
  margin: 10px 0 25px;
}

.platform-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 9px;
}

.platform-label-row strong {
  font-size: 11px;
  font-weight: 580;
}

.platform-label-row span {
  color: #668077;
  font-size: 9px;
  letter-spacing: 0.1em;
  font-weight: 760;
}

.platform-group {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
}

.platform-option {
  min-width: 0;
  border: 1px solid #d0ded5;
  border-radius: 7px;
  background: #ffffff;
  color: #55675f;
  height: 34px;
  padding: 0 5px;
  font-size: 10px;
  transition: 0.15s;
}

.platform-option:hover {
  border-color: #6fbf98;
  color: var(--green);
}

.platform-option[aria-pressed="true"] {
  background: var(--green-soft);
  color: var(--green);
  border-color: #89d2a6;
}

.preview-btn {
  position: relative;
  border: none;
  width: 100%;
  min-height: 47px;
  margin-top: 18px;
  border-radius: 8px;
  color: var(--white);
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 730;
  font-size: 12px;
  transition: background 0.16s, transform 0.16s;
}

.preview-btn:hover {
  background: var(--green-dark);
  transform: translateY(-1px);
}

.preview-btn > .end-icon {
  position: absolute;
  right: 12px;
}

.rights-note {
  display: flex;
  justify-content: center;
  gap: 7px;
  align-items: center;
  margin: 14px 0 0;
  font-size: 9px;
  color: #6c8178;
  text-align: center;
}

.rights-note .icon {
  color: var(--green);
  width: 14px;
  height: 14px;
}

.error {
  margin: 9px 0 0;
  color: #b53838;
  font-size: 12px;
  line-height: 1.45;
}

/* ==========================================================================
   Video Preview Section
   ========================================================================== */
.preview-section {
  padding: 4px 0 76px;
  scroll-margin-top: 25px;
}

.preview-container {
  background: var(--white);
  border: 1px solid var(--border);
  padding: clamp(20px, 4vw, 36px);
  border-radius: 20px;
  box-shadow: var(--shadow);
}

.preview-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.preview-heading h2 {
  margin: 0;
  font-size: 24px;
  letter-spacing: -0.04em;
}

.close-preview {
  color: #41685a;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  padding: 8px 14px;
  font-size: 12px;
}

.preview-player {
  background: #101c17;
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  color: var(--white);
}

.photo-gallery {
  display: flex;
  overflow-x: auto;
  width: 100%;
  gap: 12px;
  scroll-snap-type: x mandatory;
}

.photo-gallery img {
  width: 100%;
  max-height: 65vh;
  object-fit: contain;
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.preview-player audio {
  display: block;
  width: 100%;
  margin-top: 12px;
}

.preview-player:has(.photo-gallery) {
  aspect-ratio: auto;
  display: block;
}

.preview-player iframe,
.preview-player video {
  width: 100%;
  height: 100%;
  border: none;
  background: #101c17;
}

.preview-error {
  padding: 24px;
  text-align: center;
  line-height: 1.5;
}

.preview-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.preview-info {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  flex: 1;
}

.open-original {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 650;
  color: var(--green);
  padding: 10px 14px;
  border: 1px solid #abd8bd;
  border-radius: 9px;
}

.open-original:hover {
  background: var(--green-soft);
}

/* ==========================================================================
   Information Cards & Footer
   ========================================================================== */
.sections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 0 0 65px;
}

.info-card {
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid var(--border);
  border-radius: 17px;
  padding: 25px 29px;
  scroll-margin-top: 35px;
}

.info-card h2 {
  font-size: 19px;
  letter-spacing: -0.035em;
  margin: 0 0 12px;
}

.info-card p,
.info-card li {
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
}

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

.info-card ol {
  padding-left: 20px;
  margin: 8px 0 0;
}

.footer {
  border-top: 1px solid var(--border);
  padding: 20px 0 28px;
  font-size: 12px;
  color: #638276;
}

/* ==========================================================================
   Dialog / Modal
   ========================================================================== */
dialog {
  max-width: 450px;
  width: calc(100% - 36px);
  border: 1px solid var(--border);
  border-radius: 19px;
  padding: 27px;
  color: var(--ink);
  box-shadow: 0 20px 80px rgba(23, 61, 46, 0.20);
}

dialog::backdrop {
  background: rgba(12, 34, 25, 0.45);
}

.dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.dialog-head h2 {
  margin: 0;
  font-size: 23px;
}

.dialog-close {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: #ecf6ef;
  font-size: 22px;
  color: var(--green);
}

dialog p {
  line-height: 1.65;
  color: var(--muted);
  font-size: 13px;
}

/* ==========================================================================
   Responsive Media Queries
   ========================================================================== */
@media (min-width: 1500px) {
  .hero {
    gap: 90px;
  }
}

@media (max-width: 1030px) {
  .wrap {
    width: min(100% - 64px, 900px);
  }

  .hero {
    gap: 32px;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 1fr);
  }

  h1 {
    font-size: clamp(49px, 5.5vw, 64px);
  }

  .link-card {
    padding: 25px 23px;
  }
}

@media (max-width: 760px) {
  .wrap {
    width: min(100% - 38px, 600px);
  }

  .header {
    height: 64px;
  }

  .top-nav {
    display: none;
  }

  .brand {
    font-size: 21px;
  }

  .hero {
    min-height: unset;
    display: flex;
    flex-direction: column;
    gap: 35px;
    align-items: stretch;
    padding: 48px 0 63px;
  }

  .hero-copy {
    padding-bottom: 0;
  }

  h1 {
    font-size: clamp(48px, 10vw, 67px);
    max-width: 600px;
    margin: 20px 0 16px;
  }

  .description {
    font-size: 15px;
  }

  .socials {
    margin-top: 20px;
  }

  .privacy-line {
    margin-top: 20px;
  }

  .link-card {
    max-width: none;
    padding: 24px 20px;
  }

  .sections {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .rings {
    left: -460px;
    top: 20px;
  }
}

@media (max-width: 380px) {
  .platform-option {
    font-size: 9px;
  }

  .link-card {
    padding: 22px 15px;
  }

  .social-pill {
    font-size: 10px;
  }
}

/* ==========================================================================
   No Watermark Download & Action Components
   ========================================================================== */
.form-btn-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 10px;
  margin-top: 18px;
}

.action-btn {
  border: none;
  border-radius: 9px;
  min-height: 48px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  font-size: 12px;
  transition: all 0.16s ease;
  cursor: pointer;
}

.download-btn {
  background: var(--green);
  color: var(--white);
  box-shadow: 0 4px 14px rgba(0, 120, 85, 0.25);
}

.download-btn:hover {
  background: var(--green-dark);
  transform: translateY(-1px);
}

.preview-outline-btn {
  background: #f0f7f3;
  color: var(--green-dark);
  border: 1px solid #b7dcce;
}

.preview-outline-btn:hover {
  background: var(--green-soft);
  border-color: #83cdad;
  transform: translateY(-1px);
}

.action-btn:disabled,
.dl-pill-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none !important;
}

/* Spinner and Status */
.download-progress-container,
.preview-download-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--green-soft);
  border: 1px solid #a3dbbf;
  border-radius: 8px;
  color: #005a3e;
  font-size: 12px;
  font-weight: 550;
}

.progress-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0, 120, 85, 0.2);
  border-top-color: var(--green);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.download-status {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
}

/* Preview Watermark Badge & Meta */
.preview-heading-title {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.watermark-free-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: #e1f5eb;
  border: 1px solid #99dbb8;
  color: #006b47;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.02em;
}

.video-meta-box {
  background: #f7faf8;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 16px;
}

.meta-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.author-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #89cca8;
}

.meta-author-details {
  flex: 1;
  min-width: 0;
}

.author-name {
  font-size: 13px;
  font-weight: 750;
  color: var(--ink);
  margin-bottom: 2px;
}

.video-caption {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   Copyright & Content Rights Card
   ========================================================================== */
.copyright-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  margin-top: 14px;
  box-shadow: 0 2px 8px rgba(18, 69, 48, 0.04);
}

.copyright-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.copyright-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.02em;
}

.copyright-status-badge.safe {
  background: #e6f7ee;
  border: 1px solid #95deb5;
  color: #036843;
}

.copyright-status-badge.warning {
  background: #fff8e6;
  border: 1px solid #f2cf77;
  color: #925c04;
}

.copyright-label {
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.1em;
  color: #68857b;
}

.copyright-desc {
  font-size: 12px;
  line-height: 1.5;
  color: #3b5349;
  margin: 0 0 12px;
}

.copyright-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  font-size: 11px;
  padding-top: 10px;
  border-top: 1px dashed #dbe7df;
}

.copyright-meta-row .meta-label {
  color: var(--muted);
  font-weight: 500;
}

.type-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 10px;
}

.type-pill.safe-pill {
  background: #eaf6ef;
  color: #026640;
}

.type-pill.warn-pill {
  background: #fdf2d8;
  color: #966007;
}

/* Quick Download Action Bar */
.preview-dl-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.dl-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.16s ease;
}

.dl-pill-btn.dl-primary {
  background: var(--green);
  color: var(--white);
  box-shadow: 0 4px 14px rgba(0, 120, 85, 0.22);
}

.dl-pill-btn.dl-primary:hover {
  background: var(--green-dark);
  transform: translateY(-1px);
}

.dl-pill-btn.dl-secondary {
  background: #edf7f2;
  color: #045c40;
  border: 1px solid #a8dec3;
}

.dl-pill-btn.dl-secondary:hover {
  background: #daf0e4;
  transform: translateY(-1px);
}

.dl-pill-btn.dl-audio {
  background: #fbfbfb;
  color: #3b5349;
  border: 1px solid #d0ded6;
}

.dl-pill-btn.dl-audio:hover {
  background: #edf3f0;
  color: var(--ink);
  transform: translateY(-1px);
}

.dl-pill-btn.dl-copy {
  background: #f4faf6;
  color: var(--green);
  border: 1px solid #b7dfc8;
}

.dl-pill-btn.dl-copy:hover {
  background: var(--green-soft);
  color: var(--green-dark);
  transform: translateY(-1px);
}

.dl-pill-btn.dl-enhanced {
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.28);
}

.dl-pill-btn.dl-enhanced:hover {
  background: linear-gradient(135deg, #6d28d9, #4338ca);
  transform: translateY(-1px);
}

/* Live visual effect switch */
.video-filter-bar {
  margin-top: 12px;
  background: #f1f8f4;
  border: 1px solid #cce5d7;
  border-radius: 10px;
  padding: 10px 14px;
}

.filter-switch-label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

.filter-switch-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}

.filter-switch-label input:focus-visible + .switch-slider {
  outline: 3px solid #3949ab;
  outline-offset: 3px;
}

.switch-slider {
  width: 36px;
  height: 20px;
  background: #cfddd6;
  border-radius: 999px;
  position: relative;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.switch-slider::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  top: 3px;
  left: 3px;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.filter-switch-label input:checked + .switch-slider {
  background: var(--green);
}

.filter-switch-label input:checked + .switch-slider::before {
  transform: translateX(16px);
}

.switch-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.switch-text strong {
  font-size: 12px;
  color: #0b2e21;
}

.switch-text small {
  font-size: 11px;
  color: var(--muted);
}

.preview-player video {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, filter;
}

.preview-player video.anti-copyright-active {
  transform: scale(1.111111);
  filter: saturate(1.25) contrast(1.15);
}

.dl-pill-btn.dl-disclaimer {
  background: #fbfbfa;
  color: #4a5c54;
  border: 1px solid #cfdcd5;
}

.dl-pill-btn.dl-disclaimer:hover {
  background: #edf3f0;
  color: var(--ink);
  transform: translateY(-1px);
}

@media (max-width: 600px) {
  .form-btn-row {
    grid-template-columns: 1fr;
  }

  .preview-dl-bar {
    flex-direction: column;
  }

  .dl-pill-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
  }
}