/* Attachment Migrator landing page (public, before sign-in). Same tokens as the app (tokens.css). Desktop 900 to 1920.
   One dark passage (the hero) in the app's ink, white sections after it, type and space instead of boxes, the brand blue
   only where it means something (the one button, the files in motion). Motion: one hero reveal on load, one reveal per
   section on scroll, the illustration tells the product's story; all of it off under prefers-reduced-motion. Opacity and
   transform only, so nothing shifts. See docs/LANDING-DESIGN.md. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); font-weight: 500; color: var(--ink); background: var(--surface); line-height: 1.55; font-size: 17px; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 22px; height: 22px; flex: none; }
.ic--sm { width: 16px; height: 16px; }
.wrap { width: min(1120px, 100% - 64px); margin: 0 auto; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 100; background: var(--accent); color: var(--accent-ink); padding: 8px 12px; border-radius: 8px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.hero :focus-visible, .top :focus-visible { outline-color: #fff; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 20px; border-radius: 999px; border: 1px solid #ffffff; background: #ffffff; color: var(--ink); font-weight: 700; font-size: 14.5px; white-space: nowrap; cursor: pointer; transition: background .15s, border-color .15s, transform .15s, box-shadow .15s; }
.btn--primary:hover { background: #ecece8; border-color: #ecece8; transform: translateY(-1px); box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .5); }

/* Header: sits over the dark hero; frosted once the page scrolls (data-scrolled set by landing.js) */
.top { position: sticky; top: 0; z-index: 10; color: #fff; background: transparent; border-bottom: 1px solid transparent; transition: background .25s, border-color .25s; }
.top[data-scrolled="1"] { background: rgba(22, 26, 34, .85); border-color: rgba(255, 255, 255, .08); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); }
.top-in { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 600; font-size: 15.5px; letter-spacing: -.01em; }
.mark { width: 32px; height: 32px; border-radius: 10px; background: #fff; color: var(--ink); display: inline-grid; place-items: center; }
.mark svg { width: 19px; height: 19px; }

/* Hero: the one dark passage. The header is 68px and sits on top of it. */
.hero { background: var(--ink); color: #fff; margin-top: -68px; padding: 148px 0 96px; }
.hero-in { display: grid; grid-template-columns: 55fr 45fr; gap: 64px; align-items: center; }
.eyebrow { color: #8db1f5; font-weight: 600; font-size: 14px; letter-spacing: .02em; }
h1 { font-size: clamp(46px, 5vw, 72px); line-height: 1.02; font-weight: 700; letter-spacing: -.035em; max-width: 14ch; margin-top: 18px; }
.lead { color: #bcc4cf; font-size: 19px; line-height: 1.5; max-width: 44ch; margin-top: 26px; }
.invite { color: #8a94a3; font-size: 15px; margin-top: 30px; }
.proof { min-height: 26px; margin-top: 10px; color: #8a94a3; font-size: 15px; }
.proof b { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }

/* The illustration: a run card; files leave the server and arrive on records with a check */
.demo { background: var(--surface); color: var(--ink); border-radius: var(--r-card); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .06); padding: 22px 24px 20px; }
.demo-head { display: flex; align-items: center; gap: 12px; color: var(--ink-2); font-size: 13.5px; font-weight: 500; }
.demo-end { display: inline-flex; align-items: center; gap: 8px; }
.demo-end .ic { width: 18px; height: 18px; color: var(--accent); }
.demo-line { flex: 1; height: 1px; background: var(--line-2); }
.demo-rows { margin-top: 16px; display: grid; gap: 8px; }
.demo-row { display: grid; grid-template-columns: 170px 1fr 28px; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: 10px; background: var(--surface-2); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.demo-name { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); white-space: nowrap; overflow: hidden; }
.demo-name .ic { color: var(--ink-3); }
.demo-track { position: relative; height: 2px; background: var(--line); border-radius: 2px; }
.demo-dot { position: absolute; left: 0; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); opacity: 0; }
.demo-ok { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); opacity: 0; transform: scale(.6); }
.demo-foot { display: flex; align-items: center; gap: 14px; margin-top: 16px; color: var(--ink-3); font-size: 13px; }
.demo-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--inset); overflow: hidden; }
.demo-fill { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 3px; }
/* 8 s loop: each row's file travels for 1.6 s, then its check lands; rows start 0.9 s apart; the bar follows */
.demo.is-live .demo-dot { animation: travel 8s cubic-bezier(.4, 0, .2, 1) infinite; }
.demo.is-live .demo-ok { animation: land 8s ease-out infinite; }
.demo.is-live .demo-fill { animation: fill 8s linear infinite; }
.demo-row:nth-child(2) .demo-dot, .demo-row:nth-child(2) .demo-ok { animation-delay: .9s; }
.demo-row:nth-child(3) .demo-dot, .demo-row:nth-child(3) .demo-ok { animation-delay: 1.8s; }
.demo-row:nth-child(4) .demo-dot, .demo-row:nth-child(4) .demo-ok { animation-delay: 2.7s; }
@keyframes travel { 0% { left: 0; opacity: 0; } 4% { opacity: 1; } 20% { left: calc(100% - 10px); opacity: 1; } 23% { opacity: 0; } 100% { left: calc(100% - 10px); opacity: 0; } }
@keyframes land { 0%, 20% { opacity: 0; transform: scale(.6); } 25% { opacity: 1; transform: scale(1.08); } 29% { transform: scale(1); } 86% { opacity: 1; transform: scale(1); } 92%, 100% { opacity: 0; transform: scale(.6); } }
@keyframes fill { 0% { width: 0; } 60% { width: 100%; } 88% { width: 100%; } 92%, 100% { width: 0; } }

/* Load reveal (hero) and scroll reveal (everything else): opacity and a short rise, once */
.rise { opacity: 0; transform: translateY(14px); transition: opacity .6s ease-out, transform .6s ease-out; }
.hero.is-in .rise { opacity: 1; transform: none; }
.hero.is-in .rise:nth-child(2) { transition-delay: .07s; }
.hero.is-in .rise:nth-child(3) { transition-delay: .14s; }
.hero.is-in .rise:nth-child(4) { transition-delay: .21s; }
.hero.is-in .rise:nth-child(5) { transition-delay: .28s; }
.hero.is-in .demo { transition-delay: .32s; }
.rv { opacity: 0; transform: translateY(16px); transition: opacity .65s ease-out, transform .65s ease-out; }
.rv.is-in { opacity: 1; transform: none; }
.steps.rv, .cols.rv, .facts.rv { transition-delay: .12s; }

/* Sections: type and space; a hairline only where it marks structure */
.sec { padding: 112px 0; }
.sec--alt { background: var(--bg); }
.sec-head { max-width: 60ch; }
.sec h2 { font-size: clamp(32px, 3.2vw, 44px); line-height: 1.1; font-weight: 700; letter-spacing: -.028em; max-width: 20ch; }
.sec-lead { color: var(--ink-2); font-size: 19px; line-height: 1.5; margin-top: 16px; }
.sec h3 { font-size: 19px; font-weight: 600; letter-spacing: -.012em; }
.sec p { color: var(--ink-2); }

/* How it works: three columns under one rule; the numeral is the structure */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 64px; border-top: 1px solid var(--line); }
.step { padding-top: 28px; }
.step-n { display: block; font-size: 15px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.step h3 { margin-top: 44px; }
.step p { margin-top: 10px; max-width: 34ch; font-size: 16.5px; }

/* What you get, Safety: columns, no boxes */
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 56px; }
.cols li { border-top: 1px solid var(--line-2); padding-top: 24px; }
.cols p { margin-top: 10px; font-size: 16.5px; }
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 64px; margin-top: 56px; }
.facts li { border-top: 1px solid var(--line); padding: 26px 0 30px; }
.facts p { margin-top: 10px; font-size: 16.5px; max-width: 44ch; }

/* Who, footer */
.who .sec-lead { max-width: 62ch; }
.foot { border-top: 1px solid var(--line); padding: 26px 0; color: var(--ink-3); font-size: 14px; }
.foot-in { display: flex; justify-content: space-between; gap: 16px; }

@media (max-width: 1023px) {
  .hero { padding: 132px 0 80px; }
  .hero-in { gap: 40px; }
  .sec { padding: 96px 0; }
  .steps, .cols { gap: 32px; }
}
@media (max-width: 899px) {
  .hero-in { grid-template-columns: 1fr; }
  .steps, .cols, .facts { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise, .rv { opacity: 1; transform: none; transition: none; }
  .btn, .top { transition: none; }
  .btn--primary:hover { transform: none; }
  .demo.is-live .demo-dot, .demo.is-live .demo-ok, .demo.is-live .demo-fill { animation: none; }
  .demo-dot { opacity: 0; }
  .demo-ok { opacity: 1; transform: none; }
  .demo-fill { width: 100%; }
}