/* The page for people moving from another assistant, over site.css: three exports carried into Jean, how to
   make each, what comes in and what stays behind. Logical properties only; classes start with imp-. */
/* The promise, beside three exports carried into Jean */
.imp-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.imp-hero .site-hero-text { max-inline-size: none; }
.imp-move { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 0.75rem; align-items: center; min-inline-size: 0; }
.imp-move .felt-across { inline-size: 3.25rem; block-size: 2rem; }
.imp-from { display: flex; flex-direction: column; gap: 0.6rem; }
.imp-from li { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.8rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--room); font-size: 0.875rem; font-weight: 600; }
.imp-from .icon { inline-size: 1rem; block-size: 1rem; color: var(--ink-soft); }
.imp-pane { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--site-pane); background: var(--room); box-shadow: var(--site-float); overflow: hidden; min-inline-size: 0; }
.imp-pane-head { padding: 0.85rem 1.1rem; border-block-end: 1px solid var(--line); background: var(--site-side); font-size: 0.875rem; font-weight: 600; }
.imp-list li { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.7rem 1.1rem; border-block-end: 1px solid var(--line); }
.imp-list small { color: var(--ink-faint); font-size: 0.8125rem; }
.imp-done { display: flex; align-items: center; gap: 0.4rem; padding: 0.75rem 1.1rem; color: var(--ink-soft); font-size: 0.875rem; }
.imp-done .icon { inline-size: 1rem; block-size: 1rem; color: var(--flame); }
/* How to export, app by app */
.imp-apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.imp-apps li { display: flex; flex-direction: column; gap: 0.65rem; padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--site-pane); background: var(--room); min-inline-size: 0; }
.imp-apps h3 { font: 700 1.35rem/1.2 var(--display); }
.imp-arrives { color: var(--ink-soft); }
.imp-apps .site-source { margin-block-start: auto; }
.imp-then { max-inline-size: 46rem; font-size: 1.05rem; }
/* What comes in, and what stays behind */
.imp-col { display: flex; flex-direction: column; gap: 1rem; }
.imp-not { display: flex; flex-direction: column; gap: 0.85rem; }
.imp-not li { display: flex; gap: 0.6rem; color: var(--ink-soft); }
.imp-not li::before { content: '–' / ''; color: var(--ink-faint); }
/* Then, never move again */
.imp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.imp-cards > div { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.4rem; border: 1px solid var(--line); border-radius: var(--site-pane); background: var(--room); }
.imp-cards .icon { inline-size: 1.6rem; block-size: 1.6rem; color: var(--flame); }
.imp-cards p { color: var(--ink-soft); }
/* The last word's button, pointed at by hand */
.imp-go { position: relative; justify-content: center; }
.imp-go .felt-point { position: absolute; inset-inline-start: -5.5rem; inset-block-start: -1.5rem; inline-size: 5rem; block-size: 3.3rem; }
/* A narrower window: one column */
@media (max-width: 64rem) {
  .imp-go .felt-point { display: none; }
}
@media (max-width: 52rem) {
  .imp-hero, .imp-apps, .imp-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 30rem) {
  .imp-move { grid-template-columns: minmax(0, 1fr); }
  .imp-from { flex-direction: row; flex-wrap: wrap; }
  .imp-move .felt-across { display: none; }
}