/* Scanvisto site. The app's own Prisma style: dark space, one card in the
   light, foil only on what is selected or special, Hanken Grotesk throughout.
   The Milky Way band from the Glint icon sits behind the hero and the pricing. */

@font-face { font-family: "Hanken Grotesk"; src: url("/assets/fonts/hanken-grotesk.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

@layer base, layout, components, responsive;

@layer base {
  :root {
    color-scheme: dark;
    --ground-0: #07080b;
    --ground-1: #101217;
    --ground-2: #1a1d24;
    --ground-3: #2a2f38;
    --glass: rgba(255, 255, 255, 0.05);
    --glass-strong: rgba(255, 255, 255, 0.08);
    --line: rgba(255, 255, 255, 0.12);
    --line-strong: rgba(255, 255, 255, 0.18);
    --ink: #f1f3f7;
    --ink-muted: #c6ccd6;
    --ink-quiet: #aab1bd;
    --on-light: #101217;
    --foil: linear-gradient(120deg, #72e6ff, #a78bfa 38%, #ff8ac9 66%, #ffd98a);
    --violet: #a78bfa;
    --cyan: #72e6ff;
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --font: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --tap: 44px;
    --r-panel: 28px;
    --r-option: 20px;
    --r-control: 16px;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  body { margin: 0; background: var(--ground-0); color: var(--ink); font-family: var(--font); font-weight: 400; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; font-synthesis: none; }
  img { max-width: 100%; height: auto; }
  a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
  a, button, summary { -webkit-tap-highlight-color: transparent; }
  :focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 8px; }
  p, h1, h2, h3, figure { margin: 0; }
  ul, ol { margin: 0; padding: 0; list-style: none; }
  h1, h2, h3 { font-weight: 300; letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance; }
  ::selection { background: var(--violet); color: var(--on-light); }
  [id] { scroll-margin-top: 24px; }
  .num { font-variant-numeric: tabular-nums; }
}

@layer layout {
  .wrap { width: min(1200px, calc(100% - 48px)); margin-inline: auto; }
  main { overflow-x: clip; }

  /* The space every page opens in: the app's ground, and on the home the Milky Way. */
  .top { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(transparent 60%, var(--ground-0)), radial-gradient(60% 50% at 78% 30%, rgba(167, 139, 250, 0.14), transparent), linear-gradient(165deg, var(--ground-3) 0%, var(--ground-1) 50%, var(--ground-0) 100%); }
  .top::before { content: ""; position: absolute; inset: 0 -12%; z-index: -1; pointer-events: none; background: url("/assets/milky-way.svg") center 45% / cover no-repeat; opacity: 0.6; -webkit-mask-image: linear-gradient(#000 65%, transparent); mask-image: linear-gradient(#000 65%, transparent); }
  .top-home::before { opacity: 1; background-position: center 62%; }
  @media (prefers-reduced-motion: no-preference) {
    .top-home::before { animation: drift 90s ease-in-out infinite alternate; }
    @keyframes drift { from { transform: translateX(-4%); } to { transform: translateX(4%); } }
  }

  .site-header { position: relative; z-index: 20; }
  .header-inner { display: flex; align-items: center; gap: 24px; min-height: 88px; }
  .nav { margin-left: auto; }
  .nav-links { display: flex; gap: 4px; }
  .header-end { display: flex; align-items: center; gap: 8px; }

  .hero { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 48px; padding-block: 40px 96px; }
  .hero h1 { font-size: clamp(42px, 5vw, 72px); line-height: 1.04; letter-spacing: -0.03em; margin-bottom: 24px; }
  .hero-intro { font-size: 19px; line-height: 1.5; color: var(--ink-muted); max-width: 32em; margin-bottom: 32px; }
  .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
  .hero-note { font-size: 15px; color: var(--ink-quiet); }
  .hero-visual { display: flex; justify-content: center; }
  .hero-phones { display: grid; place-items: center; }
  .hero-phones > .phone { grid-area: 1 / 1; }

  .section { padding-block: 56px; }
  .section-intro { max-width: 720px; margin-bottom: 40px; }
  .section-intro h2, .feature-copy h2 { font-size: clamp(32px, 3.6vw, 46px); margin-bottom: 16px; }
  .section-intro p, .lede { font-size: 18px; color: var(--ink-muted); }

  .feature { display: grid; grid-template-columns: auto 1fr; gap: 64px; align-items: center; padding: 48px 64px; border-radius: var(--r-panel); background: linear-gradient(165deg, var(--ground-2), var(--ground-1)); border: 1px solid var(--line); }

  .page-head { padding-block: 24px 56px; }
  .page-head h1 { font-size: clamp(38px, 4.8vw, 62px); line-height: 1.06; letter-spacing: -0.03em; margin-bottom: 16px; }
  .page-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 40px; }
  .page-lede { font-size: 19px; line-height: 1.5; color: var(--ink-muted); max-width: 36em; }
  .page-meta { font-size: 15px; color: var(--ink-quiet); }

  .help { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: start; padding-block: 48px 96px; }
  .help-groups { display: grid; gap: 48px; min-width: 0; }
  .help-groups h2 { font-size: 28px; margin-bottom: 16px; }
  .help-contact p { color: var(--ink-muted); }
  .legal { max-width: 760px; padding-block: 40px 96px; }
  .not-found { display: flex; flex-wrap: wrap; gap: 12px; padding-block: 0 120px; }

  .site-footer { border-top: 1px solid var(--line); }
  .footer-cols { display: flex; flex-wrap: wrap; gap: 32px 56px; padding-block: 56px 32px; }
  .footer-brand { flex: 2 1 260px; display: grid; gap: 12px; align-content: start; }
  .footer-brand p { color: var(--ink-muted); font-size: 15px; max-width: 300px; }
  .footer-cols nav { flex: 1 1 140px; }
  .footer-cols h2 { font-size: 15px; font-weight: 500; letter-spacing: 0; margin-bottom: 6px; }
  .footer-cols nav a { display: flex; align-items: center; min-height: var(--tap); color: var(--ink-muted); font-size: 15px; text-decoration: none; }
  .footer-cols nav a[aria-current] { color: var(--ink); text-decoration: underline; }
  .footer-note { padding-block: 24px 40px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.5; color: var(--ink-quiet); }
}

@layer components {
  .skip-link { position: fixed; top: 8px; left: 8px; z-index: 60; transform: translateY(-160%); padding: 12px 20px; border-radius: 999px; background: var(--ink); color: var(--on-light); font-weight: 600; }
  .skip-link:focus { transform: none; }

  .wordmark { display: inline-flex; align-items: center; gap: 12px; min-height: var(--tap); text-decoration: none; font-size: 20px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; }
  .wordmark img { width: 36px; height: 36px; border-radius: 9px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45); }

  .nav-links a { display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: 14px; color: var(--ink-muted); font-size: 15px; text-decoration: none; border-radius: 999px; transition: color 150ms ease; }

  .pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--tap); padding: 0 18px; border-radius: 999px; background: var(--glass-strong); border: 1px solid var(--line-strong); color: var(--ink); font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: transform 150ms var(--ease-out), background-color 150ms ease; }
  .pill-light { background: var(--ink); border-color: var(--ink); color: var(--on-light); font-weight: 600; }
  .pill-big { min-height: 56px; padding: 0 24px; font-size: 17px; }
  .pill:active, .store-badge:active { transform: scale(0.97); }

  /* Apple's badge once the app is live; until then a label, so nothing pretends to be clickable. */
  .store-badge { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 20px 0 16px; border-radius: 14px; background: #000; border: 1px solid #a6a6a6; color: #fff; text-decoration: none; transition: transform 150ms var(--ease-out); }
  .store-badge span { display: flex; flex-direction: column; font-size: 22px; font-weight: 500; line-height: 1.05; letter-spacing: -0.01em; }
  .store-badge small { font-size: 12px; font-weight: 400; letter-spacing: 0; }
  .store-soon { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 22px 0 18px; border-radius: 14px; background: var(--glass-strong); border: 1px solid var(--line-strong); font-size: 16px; font-weight: 500; }

  .chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
  .chips li { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--glass-strong); border: 1px solid var(--line-strong); color: var(--ink-muted); font-size: 15px; }

  .language-menu, .nav-more { position: relative; }
  .language-menu > summary, .nav-more > summary { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); min-width: var(--tap); padding-inline: 14px; list-style: none; cursor: pointer; border-radius: 999px; background: var(--glass-strong); border: 1px solid var(--line-strong); font-size: 15px; transition: background-color 150ms ease; }
  .nav-more > summary { padding-inline: 0; }
  .language-menu > summary::-webkit-details-marker, .nav-more > summary::-webkit-details-marker { display: none; }
  .language-menu ul, .nav-more-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 5; min-width: 200px; padding: 8px; background: var(--ground-2); border: 1px solid var(--line-strong); border-radius: var(--r-option); box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.8); transform-origin: top right; transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out); }
  @starting-style { .language-menu[open] ul, .nav-more[open] .nav-more-panel { opacity: 0; transform: scale(0.97); } }
  .language-menu a, .nav-more-panel a { display: flex; align-items: center; min-height: var(--tap); padding-inline: 12px; border-radius: 12px; text-decoration: none; }
  .language-menu a[aria-current], .nav-more-languages a[aria-current] { color: var(--violet); }
  .nav-more { display: none; }
  .nav-more-links { display: grid; }
  .nav-more-languages { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; }
  .nav-more-languages a { font-size: 14px; color: var(--ink-muted); }

  /* A real screen of the app in a plain phone frame. */
  .phone { --w: 300px; width: var(--w); padding: 8px; border-radius: calc(var(--w) * 0.16); background: #0b0c10; border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 34px 70px rgba(0, 0, 0, 0.65); flex-shrink: 0; }
  .phone img { display: block; width: 100%; border-radius: calc(var(--w) * 0.135); }
  .phone-lead { --w: 300px; translate: 22% 0; }
  .phone-back { --w: 260px; translate: -36% 44px; rotate: -4deg; opacity: 0.9; }
  .phone-solo { --w: 280px; }

  /* Pieces of the app instead of icons: each feature shows its own bit of interface. */
  .pieces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .piece { display: flex; flex-direction: column; gap: 24px; padding: 32px; border-radius: var(--r-panel); background: var(--glass); border: 1px solid var(--line); }
  .piece-wide { grid-column: span 2; flex-direction: row; align-items: center; gap: 40px; }
  .piece-wide .piece-copy { flex: 1; }
  .piece h3 { font-size: 26px; line-height: 1.25; margin-bottom: 8px; }
  .piece p { font-size: 16px; line-height: 1.5; color: var(--ink-muted); }
  .specimen { flex: 0 0 380px; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px; border-radius: var(--r-option); background: var(--ground-1); border: 1px solid var(--line); }
  .specimen-price { font-size: 54px; line-height: 1.1; font-weight: 200; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  .specimen-line { font-size: 13px; color: var(--ink-quiet); }
  .segments { display: flex; gap: 4px; padding: 3px; border-radius: var(--r-control); background: var(--glass-strong); border: 1px solid var(--line); font-size: 14px; color: var(--ink-muted); }
  .segments span { padding: 8px 12px; border-radius: 13px; white-space: nowrap; }
  .segments .on { color: var(--ink); background: var(--ground-2); box-shadow: inset 0 0 0 1px var(--violet); }
  .lang-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .lang-chips li { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 8px; border-radius: 999px; background: var(--glass-strong); font-size: 14px; }
  .flag, .flag-sm { display: inline-grid; place-items: center; width: 28px; height: 21px; border-radius: 4px; object-fit: cover; box-shadow: 0 0 0 1px var(--line-strong); flex: none; }
  .flag-sm { width: 20px; height: 15px; border-radius: 3px; }
  .flag-mark { background: var(--ground-2); font-size: 12px; line-height: 1; }
  .flag-sm.flag-mark { font-size: 10px; }
  .scan-frame { position: relative; height: 180px; border-radius: var(--r-option); background: var(--ground-1); display: grid; place-items: center; }
  .scan-frame::before { content: ""; position: absolute; inset: 22px 30%; --c: var(--ink); background: linear-gradient(var(--c), var(--c)) left top / 22px 2px no-repeat, linear-gradient(var(--c), var(--c)) left top / 2px 22px no-repeat, linear-gradient(var(--c), var(--c)) right top / 22px 2px no-repeat, linear-gradient(var(--c), var(--c)) right top / 2px 22px no-repeat, linear-gradient(var(--c), var(--c)) left bottom / 22px 2px no-repeat, linear-gradient(var(--c), var(--c)) left bottom / 2px 22px no-repeat, linear-gradient(var(--c), var(--c)) right bottom / 22px 2px no-repeat, linear-gradient(var(--c), var(--c)) right bottom / 2px 22px no-repeat; }
  .scan-card { width: 72px; height: 100px; border-radius: 6px; background: linear-gradient(140deg, var(--ground-3), var(--ground-2)); border: 1px solid var(--line-strong); }
  .scan-label { position: absolute; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-quiet); }
  .mini-list { display: grid; padding: 4px 16px; border-radius: var(--r-option); background: var(--ground-1); }
  .mini-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 46px; font-size: 15px; border-bottom: 1px solid var(--line); }
  .mini-row .num { color: var(--ink-muted); }
  .mini-total { border-bottom: 0; color: var(--ink-quiet); }
  .mini-total .num { font-size: 20px; font-weight: 300; color: var(--ink); }
  .set-progress { display: flex; flex-direction: column; gap: 14px; min-height: 180px; padding: 20px; border-radius: var(--r-option); background: var(--ground-1); }
  .set-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; }
  .set-head .num { font-size: 13px; color: var(--ink-quiet); }
  .bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
  .bar span { display: block; width: 68%; height: 100%; border-radius: 999px; background: var(--foil); }
  .set-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; }
  .set-grid span { aspect-ratio: 63 / 88; border-radius: 3px; background: rgba(241, 243, 247, 0.55); }
  .set-grid .missing { background: rgba(255, 255, 255, 0.08); }
  .sample-note { margin-top: 16px; font-size: 13px; color: var(--ink-quiet); }

  .icon-list { display: grid; gap: 14px; margin-top: 24px; }
  .icon-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; line-height: 1.45; }
  .icon-list svg { flex: none; margin-top: 1px; color: var(--ink-muted); }

  .lang-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .lang-grid li { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 0 18px; border-radius: var(--r-option); background: var(--glass); border: 1px solid var(--line); font-size: 17px; }

  .foil-frame { padding: 1px; border-radius: var(--r-panel); background: var(--foil); }
  .pricing { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; padding: 44px 56px; border-radius: calc(var(--r-panel) - 1px); background: var(--ground-1); }
  .pricing::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("/assets/milky-way.svg") center 40% / cover no-repeat; opacity: 0.7; }
  .pricing > div { flex: 1 1 380px; }
  .pricing h2 { font-size: clamp(30px, 3.2vw, 40px); margin-bottom: 12px; }
  .pricing p { color: var(--ink-muted); }

  .faq { border-radius: var(--r-panel); background: var(--glass); border: 1px solid var(--line); overflow: hidden; }
  .faq details + details { border-top: 1px solid var(--line); }
  .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 18px 24px; cursor: pointer; list-style: none; font-size: 18px; line-height: 1.35; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary svg { flex: none; color: var(--ink-quiet); transition: transform 200ms var(--ease-out); }
  .faq details[open] summary svg { transform: rotate(180deg); }
  .faq details p { padding: 0 24px 22px; max-width: 780px; color: var(--ink-muted); font-size: 16px; line-height: 1.55; }
  .faq a, .help-contact a, .legal a { color: var(--cyan); }
  .more-link a { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); margin-top: 16px; font-size: 17px; text-decoration: none; }

  .crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--ink-quiet); margin-bottom: 20px; }
  .crumbs a { color: var(--ink-quiet); display: inline-flex; align-items: center; min-height: var(--tap); }
  .crumbs [aria-current] { display: inline-flex; align-items: center; color: var(--ink-muted); }
  .crumbs span[aria-hidden] { display: inline-flex; align-items: center; }

  .help-topics ul { display: grid; gap: 2px; }
  .help-topics a { display: flex; align-items: center; min-height: var(--tap); padding-inline: 16px; border-radius: 999px; color: var(--ink-muted); text-decoration: none; }

  .legal h2 { font-size: clamp(22px, 2.6vw, 28px); margin: 48px 0 14px; }
  .legal p, .legal-list li { color: var(--ink-muted); line-height: 1.7; }
  .legal p { margin-bottom: 16px; }
  .legal .legal-lede { font-size: 19px; color: var(--ink); }
  .legal-list { list-style: disc; padding-left: 22px; margin-bottom: 20px; }
  .legal-list li { margin-bottom: 10px; }

  .footer-mail { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); color: var(--ink-muted); text-decoration: none; justify-self: start; }

  @media (hover: hover) and (pointer: fine) {
    .nav-links a:hover, .footer-cols nav a:hover, .footer-mail:hover, .help-topics a:hover, .crumbs a:hover { color: var(--ink); }
    .pill:hover, .language-menu > summary:hover, .nav-more > summary:hover { background: rgba(255, 255, 255, 0.14); }
    .pill-light:hover { background: #ffffff; }
    .language-menu a:hover, .nav-more-panel a:hover, .help-topics a:hover { background: rgba(255, 255, 255, 0.06); }
  }
}

@layer responsive {
  @media (max-width: 1080px) {
    .specimen { flex-basis: 320px; }
    .feature { padding: 40px; gap: 40px; }
  }
  @media (max-width: 900px) {
    .nav, .language-menu { display: none; }
    .nav-more { display: block; }
    .header-end { margin-left: auto; }
    .hero { grid-template-columns: 1fr; gap: 56px; padding-top: 16px; }
    .pieces { grid-template-columns: 1fr 1fr; }
    .piece-wide { grid-column: 1 / -1; }
    .feature { grid-template-columns: 1fr; justify-items: center; }
    .lang-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .help { grid-template-columns: 1fr; gap: 24px; }
    .help-topics ul { display: flex; flex-wrap: wrap; gap: 8px; }
    .help-topics a { background: var(--glass-strong); }
  }
  @media (max-width: 640px) {
    .wrap { width: calc(100% - 32px); }
    .header-inner { min-height: 72px; }
    .hero h1 { font-size: clamp(36px, 10vw, 48px); }
    .hero-intro { font-size: 17px; }
    .phone-lead { --w: 230px; translate: 18% 0; }
    .phone-back { --w: 190px; translate: -42% 30px; }
    .phone-solo { --w: 250px; }
    .pieces { grid-template-columns: 1fr; }
    .piece { padding: 24px; }
    .piece-wide { flex-direction: column; align-items: stretch; gap: 24px; }
    .specimen { flex-basis: auto; padding: 20px 12px; }
    .segments { font-size: 13px; }
    .segments span { padding: 8px 9px; }
    .feature { padding: 28px 20px; }
    .pricing { padding: 32px 24px; }
    .section { padding-block: 40px; }
    .section-intro p, .lede { font-size: 17px; }
    .faq summary { padding: 16px 20px; font-size: 17px; }
    .faq details p { padding: 0 20px 20px; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .pill:active, .store-badge:active { transform: none; }
    .faq summary svg { transition: none; }
  }
}