/* A quiet, brand-preserving guide. No WebGL or homepage motion is loaded here.
   DESIGN_VARIANCE 5 / MOTION_INTENSITY 2 / VISUAL_DENSITY 4.
   Repeated screenshot panels deliberately share a layout for step consistency. */
.import-page { padding-top: clamp(38px, 5vw, 64px); padding-bottom: 48px; }
.import-intro { max-width: 740px; margin-bottom: 36px; }
.import-intro .eyebrow { margin-bottom: 14px; }
.import-intro h1 { margin: 0; font-size: clamp(2.25rem, 5vw, 3.8rem); line-height: 1.05; letter-spacing: -0.04em; }
.import-intro > p:last-child { max-width: 54ch; margin: 22px 0 0; font-size: 1.1rem; line-height: 1.6; color: var(--muted); }
.import-source-picker { display: flex; align-items: center; gap: 16px; margin: 0 0 24px; }
.import-source-picker label { font-weight: 600; }
.import-source-picker select { min-height: 48px; padding: 10px 36px 10px 14px; max-width: 100%; border: 1px solid var(--border); border-radius: var(--radius-control); font: inherit; background: var(--surface); color: var(--text); }
.import-step-nav { border-bottom: 1px solid var(--border); scroll-margin-top: 90px; }
.import-release-note { max-width: 850px; margin: 0 0 28px; padding: 18px 20px; border-left: 3px solid var(--accent-strong); background: var(--raised); }
.import-release-note h2 { margin: 0 0 8px; font-size: 1.08rem; font-weight: 650; }
.import-release-note p { margin: 0; color: var(--muted); line-height: 1.6; }
.import-step-nav ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.import-step-nav a { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 10px 6px; color: var(--muted); text-decoration: none; font-weight: 650; border-radius: var(--radius-control) var(--radius-control) 0 0; border-bottom: 2px solid transparent; }
.import-step-nav a:hover { background: var(--raised); color: var(--text); }
.import-step-nav a[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent-strong); background: var(--raised); }
.step-number { color: var(--accent-strong); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.import-panel { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: clamp(32px, 7vw, 100px); padding: 36px 0; scroll-margin-top: 100px; }
.import-panel[hidden] { display: none; }
.import-panel:not(:first-child) { border-top: 1px solid var(--border); }
.is-enhanced .import-panel { border-top: 0; }
.import-panel-copy { max-width: 480px; min-width: 0; padding-top: 24px; }
.import-app-label { margin: 0 0 12px; color: var(--accent-strong); font-weight: 650; }
.import-panel h2 { margin: 0 0 20px; font-size: clamp(1.8rem, 3vw, 2.65rem); line-height: 1.12; letter-spacing: -0.025em; }
.import-panel-copy > p:not(.import-app-label) { font-size: 1.08rem; line-height: 1.6; color: var(--muted); }
.import-panel-copy strong { color: var(--text); font-weight: 650; }
.import-panel-copy .import-hint { margin: 24px 0 0; border-left: 2px solid var(--accent); padding-left: 16px; font-size: 0.96rem !important; }
.import-panel-copy .import-file-example { margin-top: 24px; font-size: 0.93rem !important; }
.import-screenshot { margin: 0; min-width: 0; justify-self: center; }
.import-screenshot > a { display: block; width: min(100%, 276px); margin-inline: auto; border: 1px solid var(--border); border-radius: 22px; overflow: hidden; background: var(--raised); box-shadow: 0 12px 32px color-mix(in srgb, var(--text) 10%, transparent); }
.import-screenshot img { display: block; width: 100%; height: auto; aspect-ratio: 1206 / 2622; }
.import-screenshot figcaption { max-width: 330px; margin: 14px auto 0; font-size: 0.8rem; color: var(--muted); text-align: center; }
.import-screenshot figcaption a { display: block; margin-top: 4px; color: var(--accent-strong); text-underline-offset: 3px; }
.import-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 20px 0; border-top: 1px solid var(--border); }
.import-controls[hidden] { display: none; }
.import-controls .button { width: auto; min-width: 136px; min-height: 48px; justify-self: start; white-space: nowrap; }
.import-controls [data-guide-next] { justify-self: end; }
.import-controls .primary, .import-download .primary { background: var(--accent-strong); }
.import-controls button:disabled { opacity: 0.45; cursor: default; transform: none; }
.import-progress { margin: 0; color: var(--muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.import-details { padding-top: 48px; margin-top: 32px; border-top: 1px solid var(--border); }
.import-walkthrough[hidden], .import-source-content[hidden], .import-details[hidden] { display: none; }
.import-source-content { padding-top: 30px; border-top: 1px solid var(--border); max-width: 850px; }
.import-source-content > h2 { font-size: clamp(1.8rem, 3vw, 2.65rem); line-height: 1.15; margin: 0 0 20px; }
.import-source-content p { color: var(--muted); line-height: 1.65; max-width: 65ch; }
.import-text-steps { margin: 32px 0; padding-left: 22px; }
.import-text-steps li { padding-left: 12px; margin-bottom: 26px; }
.import-text-steps li::marker { color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.import-text-steps h3 { font-size: 1.2rem; margin: 0 0 10px; }
.import-text-steps p { margin: 0; }
.import-hint-block { padding: 22px; background: var(--raised); border-radius: var(--radius-control); }
.import-hint-block h3, .import-hint-block p { margin: 0; }
.import-hint-block h3 { margin-bottom: 10px; }
.import-format-link { width: fit-content; margin-bottom: 28px; }
.import-details h2, .import-faq h2, .import-download h2 { margin: 0 0 24px; font-size: clamp(1.7rem, 3vw, 2.1rem); line-height: 1.16; letter-spacing: -0.02em; }
.import-detail-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.import-detail-columns h3 { margin: 0 0 10px; font-size: 1.14rem; }
.import-detail-columns p, .import-privacy-note, .import-faq p { color: var(--muted); font-size: 1rem; line-height: 1.65; margin: 0; }
.import-privacy-note { margin: 28px 0 0; padding: 18px 20px; background: var(--raised); border-radius: var(--radius-control); }
.import-format-limits { margin-top: 22px; }
.import-format-limits summary { padding-block: 12px; cursor: pointer; font-weight: 600; }
.import-format-limits p { margin: 0; max-width: 70ch; color: var(--muted); line-height: 1.65; }
.import-format-limits a { color: var(--accent-strong); }
.import-faq { padding-block: 56px; max-width: 850px; }
.import-faq details { border-bottom: 1px solid var(--border); }
.import-faq summary { padding: 18px 0; font-size: 1.05rem; font-weight: 600; cursor: pointer; }
.import-faq details p { padding: 0 24px 22px 0; }
.import-faq a { color: var(--accent-strong); text-underline-offset: 3px; }
.import-download { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 32px 0; border-block: 1px solid var(--border); }
.import-download h2 { margin-bottom: 8px; }
.import-download p { margin: 0; color: var(--muted); }
.import-download .button { white-space: nowrap; }
.import-attribution { margin: 24px 0 0; max-width: 80ch; font-size: 0.8rem; line-height: 1.5; color: var(--muted); }
.import-page a:focus-visible, .import-page button:focus-visible, .import-page select:focus-visible, .import-page summary:focus-visible, .import-panel:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 5px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 780px) {
  .import-intro { margin-bottom: 28px; }
  .import-intro > p:last-child { font-size: 1rem; margin-top: 18px; }
  .import-source-picker { align-items: stretch; flex-direction: column; gap: 8px; }
  .import-source-picker select { width: 100%; }
  .import-step-nav ol { gap: 0; }
  .import-step-nav a { flex-direction: column; gap: 2px; min-height: 60px; font-size: 0.8rem; padding: 8px 2px; white-space: nowrap; }
  .step-number { font-size: 0.72rem; }
  .import-panel { grid-template-columns: 1fr; gap: 26px; padding: 28px 0; align-items: start; }
  .import-panel-copy { max-width: none; padding-top: 0; }
  .import-panel h2 { font-size: 1.9rem; }
  .import-panel-copy > p:not(.import-app-label) { font-size: 1rem; }
  .import-panel-copy .import-hint, .import-panel-copy .import-file-example { margin-top: 18px; }
  .import-screenshot > a { width: min(72vw, 276px); }
  .import-controls { gap: 8px; }
  .import-controls .button { padding-inline: 13px; min-width: 0; min-height: 44px; font-size: 0.88rem; }
  .import-progress { font-size: 0.78rem; }
  .import-detail-columns { grid-template-columns: 1fr; gap: 28px; }
  .import-details { margin-top: 20px; padding-top: 32px; }
  .import-faq { padding-block: 38px; }
  .import-download { align-items: stretch; flex-direction: column; gap: 22px; }
}