/* Visual polish: smaller type scale and Alight Motion-inspired controls. */
:root {
  --title-scale: .84;
  --motion-corner: 12px 4px 12px 4px;
}

.brand-mark {
  width: 2.15rem;
  height: 2.15rem;
  border: 0;
  border-radius: 9px 3px 9px 3px;
  transform: none;
  overflow: hidden;
  background: var(--acid);
}

.brand-mark::before,
.brand-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.brand-mark::before {
  width: 1.7rem;
  height: 1.3rem;
  bottom: .34rem;
  background: radial-gradient(circle at 50% 100%, transparent 0 3px,var(--ink) 3.5px 5px,transparent 5.5px 8px,var(--ink) 8.5px 10px,transparent 10.5px 13px,var(--ink) 13.5px 15px,transparent 15.5px);
}

.brand-mark::after { width: 4px; height: 4px; bottom: .25rem; border-radius: 50%; background: var(--pink); }
.brand-mark i { display: none; }

.hero h1 {
  font-size: clamp(3rem, 9vw, 5.8rem);
  line-height: .92;
  letter-spacing: -.02em;
}

.hero-lead { margin-top: 1.2rem; font-size: .92rem; line-height: 1.7; }

.intro h2,
.section-head h2,
.workflow h2,
.download-copy h2,
.faq h2 {
  font-size: clamp(2.1rem, 4.7vw, 3.8rem);
  line-height: 1.02;
  letter-spacing: -.015em;
}

.primary-btn,
.ghost-btn {
  position: relative;
  min-height: 52px;
  border-radius: var(--motion-corner);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.primary-btn {
  background: var(--acid);
  border-color: var(--acid);
  box-shadow: 4px 4px 0 rgba(255,79,145,.78);
  overflow: hidden;
}

.primary-btn::before {
  content: "";
  position: absolute;
  left: 11px;
  bottom: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 13px 0 0 var(--blue), 26px 0 0 var(--ink);
  opacity: .7;
}

.primary-btn::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 9px;
  height: 1px;
  background: rgba(11,12,13,.3);
}

.primary-btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 rgba(255,79,145,.78); }
.primary-btn .btn-icon { font-size: 1.1rem; }
.primary-btn small { font-size: .54rem; letter-spacing: .05em; }
.primary-btn b { font-size: .82rem; }
.primary-btn > i { margin-left: .6rem; font-size: .66rem; }

.primary-btn .btn-icon {
  flex: 0 0 1.8rem;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 8px 3px 8px 3px;
  font-size: 0;
  background: var(--ink);
  position: relative;
  overflow: hidden;
}

.primary-btn .btn-icon::before {
  content: "";
  position: absolute;
  width: 1.4rem;
  height: 1rem;
  left: 50%;
  bottom: .26rem;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 100%, transparent 0 2px,var(--acid) 2.5px 3.5px,transparent 4px 6px,var(--acid) 6.5px 7.5px,transparent 8px 10px,var(--acid) 10.5px 11.5px,transparent 12px);
}

.ghost-btn {
  border-color: #59605b;
  border-radius: 4px 12px 4px 12px;
}

.ghost-btn::before {
  content: "";
  position: absolute;
  top: 7px;
  right: 8px;
  width: 5px;
  height: 5px;
  border: 1px solid var(--acid);
  border-radius: 50%;
}

.ghost-btn:hover { border-color: var(--acid); transform: translateY(-2px); box-shadow: 3px 3px 0 rgba(216,255,55,.35); }
.ghost-btn b { font-size: 1rem; }

.display-copy h3 { font-size: 1.45rem; }
.download-card h3 { font-size: 1.4rem; }
.keyword-strip { margin: 1.1rem 0 0; padding-top: .8rem; border-top: 1px solid rgba(11,12,13,.2); font-size: .62rem; letter-spacing: .04em; opacity: .76; }
.app-badge { border-radius: 10px 3px 10px 3px; background: var(--acid); color: var(--ink); overflow: hidden; }
.app-badge span { font-size: 0; width: 2.4rem; height: 1.8rem; background: radial-gradient(circle at 50% 100%, transparent 0 4px,var(--ink) 4.5px 6px,transparent 6.5px 9px,var(--ink) 9.5px 11px,transparent 11.5px 14px,var(--ink) 14.5px 16px,transparent 16.5px); }
.mobile-download a { border-radius: 10px 3px 10px 3px; box-shadow: 3px 3px 0 var(--pink); }

@media (min-width: 768px) and (max-width: 1023px) {
  .hero-inner { grid-template-columns: 1fr; gap: 3rem; }
  .editor-window { grid-column: auto; grid-row: auto; transform: rotate(1deg); box-shadow: 10px 10px 0 var(--pink); }
  .hero-copy { grid-column: auto; grid-row: auto; text-align: left; padding: 0; border-right: 0; }
  .hero-copy .eyebrow { justify-content: flex-start; }
  .hero-copy .eyebrow span { order: initial; margin: 0 .4rem 0 0; }
  .hero-copy .hero-lead { margin-left: 0; }
  .hero-copy .hero-actions { justify-content: flex-start; }
  .hero-copy .hero-meta { justify-content: flex-start; }
  .hero-copy .hero-meta span { align-items: flex-start; }
}

@media (min-width: 1024px) {
  .hero h1 { font-size: clamp(4rem, 6vw, 6.3rem); }
  .header-cta { border-radius: 7px 2px 7px 2px; }

  /* Editorial split: the canvas leads on the left, copy follows on the right. */
  .hero-inner {
    grid-template-columns: 1.18fr .82fr;
    gap: 3.4rem;
  }

  .editor-window {
    grid-column: 1;
    grid-row: 1;
    transform: rotate(-2deg) translate(-1.5rem, .25rem);
    box-shadow: -14px 14px 0 var(--pink);
  }

  .hero-copy {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
    padding: 1.5rem 0 1.5rem 1rem;
    border-right: 0;
    position: relative;
    transform: translateY(.5rem);
  }

  .hero-copy::before {
    content: "";
    position: absolute;
    top: 1.1rem;
    right: 0;
    width: 3.5rem;
    height: .35rem;
    background: var(--acid);
    clip-path: polygon(0 0,100% 0,78% 100%,0 100%);
    opacity: .9;
  }

  .hero-copy .eyebrow { justify-content: flex-end; display: flex; align-items: center; }
  .hero-copy .eyebrow span { order: 2; margin: 0 0 0 .4rem; }
  .hero-copy .hero-lead { margin-left: auto; }
  .hero-copy .hero-actions { justify-content: flex-end; }
  .hero-copy .hero-meta { justify-content: flex-end; }
  .hero-copy .hero-meta span { align-items: flex-end; }

  .scroll-note { left: 1rem; right: auto; }
}