/* ScreenDuo's visual system: editorial, tactile, and quiet. */
:root {
  --serif: "Iowan Old Style", Baskerville, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Avenir Next", "Segoe UI", sans-serif;
  --line: rgba(16, 16, 21, .1);
  --ease-premium: cubic-bezier(.32, .72, 0, 1);
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.site-header {
  margin-top: 18px;
  height: 68px;
  padding: 6px 8px 6px 16px;
  border-radius: 999px;
  background: rgba(248, 247, 243, .86);
  box-shadow: 0 18px 50px rgba(31, 25, 32, .08), inset 0 1px 0 rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.site-nav a {
  transition: color .55s var(--ease-premium), transform .55s var(--ease-premium), background-color .55s var(--ease-premium);
}

.site-nav .nav-cta {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 8px 20px rgba(16, 16, 21, .12);
}

.menu-toggle {
  position: relative;
  width: 43px;
  height: 43px;
  padding: 0;
  border: 0;
  font-size: 0;
  background: rgba(16, 16, 21, .05);
  transition: background-color .55s var(--ease-premium), transform .55s var(--ease-premium);
}

.menu-toggle::before,
.menu-toggle::after {
  content: "";
  position: absolute;
  left: 13px;
  width: 17px;
  height: 1px;
  background: currentColor;
  transition: transform .55s var(--ease-premium), top .55s var(--ease-premium);
}

.menu-toggle::before { top: 17px; }
.menu-toggle::after { top: 25px; }
.menu-toggle.is-open::before { top: 21px; transform: rotate(45deg); }
.menu-toggle.is-open::after { top: 21px; transform: rotate(-45deg); }
.menu-toggle:hover { background: rgba(16, 16, 21, .1); transform: translateY(-1px); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(16, 16, 21, .045);
  letter-spacing: .17em;
}

.eyebrow-dot { margin-right: 8px; }

.button {
  transition: transform .55s var(--ease-premium), background-color .55s var(--ease-premium), color .55s var(--ease-premium), box-shadow .55s var(--ease-premium);
}

.button > span[aria-hidden="true"] {
  display: inline-grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  margin: -4px -5px -4px -3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .13);
  transition: transform .55s var(--ease-premium), background-color .55s var(--ease-premium);
}

.button-quiet > span[aria-hidden="true"] { background: rgba(16, 16, 21, .07); }
.button-light > span[aria-hidden="true"] { background: rgba(16, 16, 21, .08); }
.button:hover > span[aria-hidden="true"] { transform: translateX(3px) rotate(4deg); }

.feature-card,
.capture-board,
.launch-panel,
.guide-card {
  box-shadow: 0 0 0 1px rgba(16, 16, 21, .055), 0 22px 60px rgba(31, 25, 32, .08), inset 0 1px 0 rgba(255, 255, 255, .56);
}

.feature-card,
.guide-card,
.launch-panel { border-radius: 22px; }

.feature-card {
  transition: transform .7s var(--ease-premium), box-shadow .7s var(--ease-premium);
}

.feature-card:hover {
  box-shadow: 0 0 0 1px rgba(16, 16, 21, .07), 0 28px 70px rgba(31, 25, 32, .12), inset 0 1px 0 rgba(255, 255, 255, .62);
}

.guide-card {
  transition: transform .7s var(--ease-premium), box-shadow .7s var(--ease-premium), background-color .7s var(--ease-premium);
}

.guide-card:hover {
  transform: translateY(-7px) rotate(.2deg);
  box-shadow: 0 0 0 1px rgba(16, 16, 21, .07), 0 28px 70px rgba(31, 25, 32, .12), inset 0 1px 0 rgba(255, 255, 255, .64);
}

.guide-hub-header {
  position: relative;
}

.guide-hub-header::after {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  right: 6%;
  top: 15%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(250, 96, 79, .2), transparent 68%);
  pointer-events: none;
}

.article-header h1,
.guide-hub-header h1 { max-width: 850px; }

.reveal {
  filter: blur(7px);
  transition: opacity .9s var(--ease-premium), transform .9s var(--ease-premium), filter .9s var(--ease-premium);
}

.reveal.is-visible { filter: blur(0); }

@media (max-width: 640px) {
  .site-header {
    width: min(calc(100% - 32px), var(--max));
    height: 60px;
    margin-top: 12px;
    padding-left: 13px;
  }

  .site-nav {
    top: 68px;
    border: 0;
    box-shadow: 0 20px 42px rgba(16, 16, 21, .14), inset 0 1px 0 rgba(255, 255, 255, .8);
  }

  .capture-board,
  .capture-phone,
  .device-ipad,
  .device-phone,
  .feature-card,
  .guide-card { transform: none; }

  .editor-window { transform: rotate(1.7deg) scale(1.03); }
  .pairing-art { transform: scale(.8); }
  .guide-hub-header::after { right: -20px; top: 23%; width: 120px; height: 120px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { filter: none; }
  .menu-toggle::before,
  .menu-toggle::after { transition: none; }
}