/* A small presentation pass, loaded only by the existing homepage.
   Keep the original palette, typography, artwork and application intact. */

.site-shell {
  --polish-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Give the existing navigation more readable labels and comfortable targets. */
.site-nav-inner {
  padding-block: 1rem;
}

.site-nav-links > a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: .75rem;
}

.site-nav-links > a:not(.site-nav-download)::after {
  bottom: .35rem;
}

.site-nav-download {
  justify-content: center;
  padding-inline: 1.15rem;
}

/* Preserve the headline and its distinctive composition. Refine reading rhythm. */
.hero-description {
  line-height: 1.6;
  text-wrap: pretty;
}

.hero-actions {
  gap: .875rem;
}

.button {
  font-size: .8rem;
  letter-spacing: .015em;
}

.product-proof {
  row-gap: .6rem;
  font-size: .625rem;
}

:is(.features-header, .setup-header, .launch-header) > p {
  line-height: 1.65;
  text-wrap: pretty;
}

/* Reuse the page's central hairline and sage surface, not a new visual style. */
.lr-feature {
  background-image: linear-gradient(
    90deg,
    transparent 49.96%,
    rgb(17 17 17 / 8%) 50%,
    transparent 50.04%
  );
}

.lr-copy h2 {
  font-weight: 520;
}

.lr-intro {
  text-wrap: pretty;
}

.lr-benefits {
  gap: 1rem;
  margin-block: 1.75rem;
}

.lr-benefits li + li {
  border-top: 1px solid rgb(17 17 17 / 9%);
  padding-top: 1rem;
}

.lr-benefits p {
  text-wrap: pretty;
}

.lr-links {
  gap: .75rem 1.4rem;
}

.lr-primary,
.lr-secondary {
  min-height: 3rem;
}

.lr-figure figcaption {
  max-width: 34rem;
  margin-top: 1rem;
  line-height: 1.65;
}

/* Let content shrink inside the existing grids rather than clip at mid widths. */
:is(.hero-grid, .features-header, .setup-header, .launch-header,
    .download-panel, .newsletter-panel, .site-footer-links) > * {
  min-width: 0;
}

.download-desc {
  font-size: .9rem;
  line-height: 1.65;
}

.download-option-meta {
  font-size: .625rem;
  line-height: 1.5;
}

.download-option-text > span:last-child {
  font-size: .75rem;
  line-height: 1.6;
}

.download-mini-option em,
.download-support-note,
.newsletter-note {
  font-size: .6875rem;
  line-height: 1.6;
}

.newsletter-form input,
.newsletter-submit {
  font-size: .8125rem;
}

.site-footer-column a {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  font-size: .75rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.site-footer-bottom {
  font-size: .6875rem;
  line-height: 1.6;
}

/* A visible keyboard path, including the navigation and footer. */
.site-shell :where(a, button, input):focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 4px;
}

.site-shell :is(.setup-step-trigger, .download-option,
    .download-mini-option, .maker-version):focus-visible {
  outline-offset: -4px;
}

.site-shell .skip-link:focus-visible {
  outline-offset: 3px;
}

@media (min-width: 901px) {
  .newsletter-panel {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: clamp(2rem, 4vw, 4rem);
  }
}

@media (min-width: 761px) {
  .site-footer-links {
    grid-template-columns: minmax(0, .75fr) minmax(0, 1.6fr) minmax(0, .75fr);
  }
}

@media (hover: hover) and (pointer: fine) {
  .button,
  .lr-primary,
  .lr-secondary,
  .newsletter-submit {
    transition-duration: 220ms;
    transition-timing-function: var(--polish-ease);
  }

  .release-announcement {
    gap: .75rem;
  }

  .release-announcement-arrow {
    transition: transform 220ms var(--polish-ease);
  }

  .release-announcement:hover .release-announcement-arrow,
  .release-announcement:focus-visible .release-announcement-arrow {
    transform: translateX(3px);
  }

  .lr-secondary {
    transition-property: color, text-underline-offset;
  }

  .lr-secondary:hover {
    color: var(--ink);
    text-underline-offset: .45em;
  }
}

@media (max-width: 900px) {
  .lr-feature {
    background-image: none;
  }
}

@media (max-width: 760px) {
  .hero-grid {
    padding-top: 3.25rem;
  }
}

@media (max-width: 560px) {
  .site-nav {
    padding-inline: 1rem;
  }

  .hero-grid,
  .feature-rail,
  .workflow-layout,
  .lr-feature-inner,
  .features-section-inner,
  .how-it-works-inner,
  .maker-note-layout,
  .launch-inner,
  .privacy-inner,
  .download-inner,
  .newsletter-inner,
  .site-footer-inner {
    width: calc(100% - 2rem);
  }

  .lr-feature-inner {
    gap: 2rem;
  }

  .lr-note {
    font-size: .8125rem;
  }

  .site-footer-column a {
    font-size: .75rem;
  }
}

@media (max-width: 360px) {
  .hero h1 {
    font-size: clamp(3.25rem, 16.5vw, 3.75rem);
  }
}

/* Touch taps should not leave a control looking as though it is hovering. */
@media (hover: none) {
  .button:hover,
  .lr-primary:hover,
  .newsletter-submit:hover {
    transform: none;
  }
}

/* Morning workflow: keep the five scenes, with a shorter and quieter rhythm.
   The original controller measures this height, including direct step clicks. */
.workflow-story {
  --workflow-nav-offset: 5rem;
  height: 400svh;
}

.workflow-pin {
  top: var(--workflow-nav-offset);
  height: calc(100svh - var(--workflow-nav-offset));
  min-height: 0;
  padding-block: clamp(1rem, 2.5vh, 1.75rem);
}

.workflow-layout {
  height: 100%;
  min-height: 0;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 6rem);
}

.workflow-copy h2 {
  max-width: 13ch;
  font-size: clamp(2.5rem, 3.5vw, 4.4rem);
  line-height: 1;
}

.workflow-intro {
  margin-top: 1.25rem;
  line-height: 1.6;
}

.workflow-steps {
  margin-top: clamp(1.25rem, 2.5vh, 2rem);
}

.workflow-step {
  color: rgb(242 241 236 / 68%);
  padding-block: .65rem;
}

.workflow-step:hover,
.workflow-step[data-active="true"] {
  transform: none;
}

.workflow-step-body strong {
  font-size: .9375rem;
  line-height: 1.3;
}

.workflow-step-body > span {
  font-size: .8125rem;
  line-height: 1.5;
}

.workflow-step .workflow-step-marker {
  width: 3rem;
  margin: 0;
}

.workflow-step .workflow-step-shape {
  opacity: .65;
}

.workflow-step:hover .workflow-step-shape,
.workflow-step[data-active="true"] .workflow-step-shape {
  filter: none;
  transform: scale(1.02) rotate(0);
}

.workflow-visual {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-self: center;
  height: min(100%, 36rem);
  min-height: 0;
}

.workflow-stage-status {
  font-size: .625rem;
}

.workflow-stage {
  height: 100%;
  min-height: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.workflow-stage::after {
  opacity: 0;
}

.workflow-scene {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 1.25rem;
  padding: .5rem;
  transform: translateY(.65rem);
  transition: opacity 300ms ease, transform 420ms var(--polish-ease);
}

.workflow-scene[data-motif] .workflow-scene-copy {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  max-width: 32rem;
  margin-inline: auto;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.workflow-scene[data-motif] .workflow-scene-copy::after {
  opacity: 0;
}

.workflow-scene[data-motif] .workflow-scene-copy > span {
  color: #c4c3be;
  font-size: .625rem;
}

.workflow-scene[data-motif] .workflow-scene-copy h3 {
  max-width: 26ch;
  margin-top: .625rem;
  color: #f2f1ec;
  font-size: clamp(1.35rem, 2.2vw, 2.15rem);
  font-weight: 540;
  line-height: 1.12;
}

.workflow-preview {
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  min-height: 0;
  margin: 0;
}

.workflow-preview-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  position: relative;
  flex: 0 1 auto;
  align-self: center;
  width: 100%;
  max-width: 35rem;
  aspect-ratio: var(--workflow-media-ratio);
  min-width: 0;
  min-height: 0;
}

.workflow-preview > figcaption {
  flex: none;
  color: #a5a59e;
  font-size: .6875rem;
  line-height: 1.4;
  text-align: center;
}

.workflow-capture {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
}

.workflow-illustration {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.workflow-illustration-content {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.workflow-preview .workflow-product-preview {
  position: relative;
  width: 32rem;
  max-width: none;
  margin: 0;
  inset: auto;
  translate: none;
  transform: none;
  transform-origin: center;
  filter: none;
}

.workflow-preview .workflow-app-window {
  width: 100%;
  background: #fafaf8;
  border: 1px solid #d8d7d1;
  border-radius: .875rem;
  box-shadow: 0 1rem 2.5rem #0003;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.workflow-preview .workflow-app-bar {
  background: #f0efec;
}

.workflow-preview .workflow-product-preview::before,
.workflow-preview .workflow-product-preview::after,
.workflow-preview .workflow-app-window::before,
.workflow-preview .workflow-app-window::after {
  opacity: 0;
}

/* Leave the meaningful notification/file/clipboard actions moving. Stop the
   extra floating, frame pulses and window sheen competing around them. */
.workflow-motif {
  opacity: 0;
}

.workflow-motif *,
.workflow-product-preview,
.workflow-product-preview::before,
.workflow-product-preview::after,
.workflow-app-window::before,
.workflow-app-window::after,
.workflow-scene[data-active="true"] .workflow-app-window {
  animation: none;
}

.workflow-product-preview::before {
  opacity: .25;
}

.workflow-product-preview::after {
  opacity: .2;
}

.workflow-app-window::after {
  opacity: 0;
}

@media (min-width: 901px) and (max-height: 740px) {
  .workflow-copy h2 {
    margin-top: 1rem;
    font-size: clamp(2rem, 3vw, 3rem);
  }

  .workflow-intro {
    margin-top: .875rem;
    font-size: .875rem;
  }

  .workflow-steps {
    margin-top: 1rem;
  }

  .workflow-step {
    padding-block: .4rem;
  }
}

@media (max-width: 900px) {
  .workflow-visual {
    align-self: stretch;
    height: 100%;
  }

  .workflow-layout {
    height: 100%;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    align-content: stretch;
    gap: .875rem;
  }

  .workflow-copy h2 {
    max-width: 22ch;
    margin-top: .625rem;
    font-size: clamp(1.65rem, 6.8vw, 2.4rem);
    line-height: 1.05;
  }

  .workflow-steps {
    margin-top: 1rem;
    padding-bottom: 4.25rem;
  }

  .workflow-step {
    position: static;
    padding: 0;
  }

  /* Reuse the selected button's existing label and description. Inactive
     labels remain hidden by the original mobile stylesheet. */
  .workflow-step[data-active="true"] .workflow-step-body {
    display: grid;
    position: absolute;
    top: 3.4rem;
    inset-inline: 0;
    gap: .2rem;
    text-align: left;
    pointer-events: none;
  }

  .workflow-step-body strong {
    font-size: .875rem;
  }

  .workflow-step-body > span {
    font-size: .75rem;
    line-height: 1.4;
  }

  .workflow-stage {
    height: 100%;
    min-height: 0;
  }

  .workflow-stage-status {
    margin-bottom: .5rem;
  }

  .workflow-stage-progress {
    margin-top: .5rem;
  }

  .workflow-scene {
    gap: .75rem;
    padding: .25rem;
  }

  .workflow-scene[data-motif] .workflow-scene-copy h3 {
    font-size: clamp(1.2rem, 4.5vw, 1.6rem);
  }

  .workflow-preview {
    gap: .625rem;
  }
}

@media (max-width: 900px) and (max-height: 700px) {
  .workflow-pin {
    padding-block: .5rem;
  }

  .workflow-copy h2 {
    max-width: 23ch;
    font-size: 1.45rem;
  }

  .workflow-steps {
    margin-top: .625rem;
    padding-bottom: 3.7rem;
  }

  .workflow-step .workflow-step-marker {
    width: 2.5rem;
  }

  .workflow-step[data-active="true"] .workflow-step-body {
    top: 2.75rem;
    gap: .15rem;
  }

  .workflow-step-body strong {
    font-size: .8125rem;
  }

  .workflow-step-body > span {
    font-size: .6875rem;
    line-height: 1.3;
  }

}

@media (max-width: 900px) and (max-height: 600px) {
  .workflow-scene[data-motif] .workflow-scene-copy h3 {
    font-size: 1.1rem;
  }

  .workflow-scene {
    gap: .5rem;
  }
}

/* The existing artwork stays still when the visitor requests less motion. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .site-shell *,
  .site-shell *::before,
  .site-shell *::after {
    animation: none !important;
    transition: none !important;
  }

  .release-announcement:hover .release-announcement-arrow,
  .release-announcement:focus-visible .release-announcement-arrow {
    transform: none;
  }
}