/* VERSIQ product page. The product identity (VERSIQ black, cyan, the "One
   Line" of the owner-accepted App Store series) inside the NEEDFORM shell. */

@font-face { font-family: "Manrope"; src: url("fonts/Manrope.woff") format("woff"), url("fonts/Manrope.ttf") format("truetype"); font-style: normal; font-weight: 200 800; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-SemiBold.woff") format("woff"), url("fonts/IBMPlexMono-SemiBold.ttf") format("truetype"); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("fonts/InstrumentSerif-Italic.woff") format("woff"), url("fonts/InstrumentSerif-Italic.ttf") format("truetype"); font-style: italic; font-weight: 400; font-display: swap; }

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .38s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

:root {
  --ink: #07080A;
  --surface: #0E1013;
  --raise: #14171B;
  --line: #23282E;
  --cyan: #28D7C5;
  --white: #F5F7F9;
  --muted: #9AA3AD;
  --hh: 72px;
  --gutter: 64px;
  --max: 1312px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  color-scheme: dark;
}
@media (max-width: 1199px) { :root { --gutter: 40px; } }
@media (max-width: 767px) { :root { --hh: 60px; --gutter: 24px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--hh); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--ink); color: var(--white); font-family: var(--sans); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul, figure, fieldset { margin: 0; }
ol, ul { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
::selection { background: var(--cyan); color: var(--ink); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--cyan); letter-spacing: -.005em; font-size: 1.08em; line-height: .9; }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.skip-link { position: fixed; left: 16px; top: 12px; z-index: 100; padding: 12px 18px; border-radius: 8px; background: var(--white); color: var(--ink); font-weight: 600; text-decoration: none; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.form-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- header (NEEDFORM shell) ---------- */
.vq-header { position: sticky; top: 0; z-index: 50; height: var(--hh); background: rgb(7 8 10 / .9); border-bottom: 1px solid rgb(245 247 249 / .06); }
@supports (backdrop-filter: blur(1px)) { .vq-header { background: rgb(7 8 10 / .72); backdrop-filter: saturate(1.3) blur(16px); -webkit-backdrop-filter: saturate(1.3) blur(16px); } }
.vq-header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.vq-home img { height: 20px; width: auto; }
.vq-nav { display: flex; align-items: center; gap: 28px; font-size: .9375rem; font-weight: 500; }
.vq-nav a { text-decoration: none; color: var(--muted); transition: color .2s var(--ease); }
.vq-nav a:hover, .vq-nav a[aria-current="page"] { color: var(--white); }
.vq-nav .vq-nav-cta { white-space: nowrap; display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border: 1px solid var(--cyan); border-radius: 999px; color: var(--cyan); font-weight: 600; }
.vq-nav .vq-nav-cta:hover { background: var(--cyan); color: var(--ink); }
@media (max-width: 700px) {
  .vq-nav a:not(.vq-nav-cta):not([aria-current]) { display: none; }
  .vq-nav { gap: 16px; }
  .vq-home img { height: 16px; }
}

/* ---------- shared ---------- */
.vq-section-title { font-size: clamp(2.25rem, 4.6vw, 4.25rem); line-height: 1.02; font-weight: 700; letter-spacing: -.04em; text-wrap: balance; }
.vq-kicker { display: flex; gap: 12px; align-items: baseline; font-family: var(--mono); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); }
.vq-kicker span { color: var(--muted); }
.vq-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--cyan); color: var(--ink); font-size: .9375rem; font-weight: 700; text-decoration: none; cursor: pointer; transition: background-color .2s var(--ease), transform .2s var(--ease); }
.vq-button:hover { background: #4FE3D4; }
.vq-button:active { transform: translateY(1px); }
.vq-button:focus-visible { outline-color: var(--white); }
.vq-link { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: .9375rem; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.vq-link::after { content: "→"; display: inline-block; text-decoration: none; }
.vq-link:hover { text-decoration-color: var(--cyan); }
.vq-note { font-family: var(--mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* ---------- device: Apple iPhone 18 Pro bezel over real recordings ---------- */
.vq-phone { --pw: 300px; --sh: calc(var(--pw) * 1311 / 675); position: relative; width: var(--pw); aspect-ratio: 675 / 1380; filter: drop-shadow(0 40px 60px rgb(0 0 0 / .6)); transition: transform .9s cubic-bezier(.65, 0, .35, 1); }
.vq-screen { position: absolute; left: 5.333%; top: 2.5%; width: 89.333%; height: 95%; overflow: hidden; border-radius: 12% / 5.6%; background: var(--ink); }
.vq-bezel { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vq-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s var(--ease); }
.vq-clip.is-on { opacity: 1; }
.vq-clip-landscape { left: 50%; top: 50%; inset: auto; width: var(--sh); height: calc(var(--sh) * 603 / 1311); max-width: none; transform: translate(-50%, -50%) rotate(90deg); }
.vq-phone.is-landscape { transform: rotate(-90deg) scale(var(--ls, .9)); }

/* ---------- hero ---------- */
.vq-hero { position: relative; min-height: calc(100svh - var(--hh)); display: grid; align-items: center; overflow: hidden; padding-block: clamp(40px, 7vh, 88px); background: radial-gradient(60% 50% at 72% 55%, rgb(40 215 197 / .07), transparent 70%), var(--ink); }
.vq-line { position: absolute; left: 0; width: 100%; height: 120px; top: 56%; transform: translateY(-50%); fill: none; stroke: var(--cyan); stroke-width: 2; vector-effect: non-scaling-stroke; opacity: .9; }
.vq-line path { stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.motion-off) .vq-line path { animation: vq-draw 2.4s .2s cubic-bezier(.65, 0, .35, 1) both; }
}
@keyframes vq-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.vq-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px 64px; align-items: center; }
.vq-brandline { display: flex; align-items: center; gap: 16px; margin-bottom: 36px; }
.vq-icon { width: 56px; height: 56px; border-radius: 13px; box-shadow: 0 0 0 1px var(--line); view-transition-name: versiq-icon; }
.vq-appname { display: grid; line-height: 1.25; }
.vq-appname strong { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; }
.vq-appname span { color: var(--muted); font-size: .875rem; }
.vq-logo { width: 176px; height: auto; margin-bottom: 28px; }
.vq-hero h1 { font-size: clamp(3rem, 6.6vw, 6.5rem); line-height: .98; font-weight: 700; letter-spacing: -.045em; max-width: 11ch; }
.vq-lead { margin-top: 28px; max-width: 34ch; font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.5; color: #C3CAD1; }
.vq-status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 28px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--mono); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.vq-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgb(40 215 197 / .18); }
.vq-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; }
.vq-hero-device { display: grid; justify-items: center; gap: 18px; }
.vq-hero-device .vq-phone { --pw: min(330px, calc((100svh - var(--hh) - 180px) * 675 / 1380)); }
.vq-hero-device figcaption, .vq-story-device figcaption { font-family: var(--mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: center; }

/* ---------- story: seven steps ---------- */
.vq-story { padding-block: clamp(96px, 14vh, 168px) clamp(48px, 8vh, 96px); border-top: 1px solid var(--line); }
.vq-story-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 64px; margin-top: clamp(40px, 6vh, 72px); }
.vq-story-device { position: sticky; top: calc(var(--hh) + 24px); height: calc(100svh - var(--hh) - 48px); display: grid; place-items: center; }
.vq-story-device .vq-phone { --pw: min(320px, calc((100svh - var(--hh) - 120px) * 675 / 1380)); }
.vq-steps { position: relative; padding-left: 36px; }
.vq-steps::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--line); }
.vq-steps::after { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 100%; background: var(--cyan); transform-origin: 50% 0; transform: scaleY(var(--sp, 0)); }
.vq-step { min-height: 72svh; display: flex; flex-direction: column; justify-content: center; gap: 16px; transition: opacity .5s var(--ease); }
/* Dimmed only while the script follows the reader; without it every step reads fully. */
.vq-live .vq-step { opacity: .32; }
.vq-live .vq-step.is-active { opacity: 1; }
.vq-step h3 { font-size: clamp(2rem, 3.8vw, 3.5rem); line-height: 1.02; font-weight: 700; letter-spacing: -.04em; }
.vq-step > p:last-child { max-width: 38ch; font-size: 1.125rem; color: #C3CAD1; }

/* ---------- film + gallery ---------- */
.vq-film { padding-block: clamp(96px, 14vh, 168px); background: var(--surface); border-top: 1px solid var(--line); }
.vq-film-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 48px 64px; align-items: center; }
.vq-film-copy { display: grid; gap: 22px; }
.vq-film-copy > p:not(.vq-kicker):not(.vq-note) { max-width: 40ch; font-size: 1.125rem; color: #C3CAD1; }
.vq-film-player { justify-self: center; width: min(380px, 100%); aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px var(--line), 0 50px 90px -40px rgb(0 0 0 / .9); }
.vq-film-video { width: 100%; height: 100%; object-fit: cover; }
.vq-gallery-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 32px; margin-top: clamp(80px, 12vh, 128px); }
.vq-gallery-head h3 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.vq-gallery-head p { color: var(--muted); font-size: .9375rem; }
.vq-gallery { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(200px, 22vw, 290px); gap: 16px; margin-top: 24px; padding: 4px max(var(--gutter), calc((100vw - var(--max)) / 2)) 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2)); scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.vq-gallery li { scroll-snap-align: start; }
.vq-gallery img { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 0 0 1px var(--line); }

/* ---------- not ---------- */
.vq-not { padding-block: clamp(96px, 14vh, 160px); }
.vq-not-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 48px; }
.vq-not-list li { padding-top: 24px; border-top: 1px solid var(--line); position: relative; }
.vq-not-list li::before { content: ""; position: absolute; left: 0; top: -1px; width: 48px; height: 2px; background: var(--cyan); }
.vq-not-list h3 { font-size: 1.5rem; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
.vq-not-list p { margin-top: 12px; color: #C3CAD1; max-width: 34ch; }

/* ---------- looks ---------- */
.vq-looks { padding-block: clamp(96px, 14vh, 160px); background: var(--surface); border-top: 1px solid var(--line); }
.vq-looks-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 48px 64px; align-items: center; }
.vq-looks-copy { display: grid; gap: 24px; align-content: center; }
.vq-looks-copy > p { max-width: 38ch; font-size: 1.125rem; color: #C3CAD1; }
.vq-seg { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.vq-seg legend { width: 100%; margin-bottom: 10px; font-family: var(--mono); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.vq-seg label { position: relative; cursor: pointer; }
.vq-seg input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.vq-seg span { display: block; min-width: 56px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; text-align: center; font-weight: 600; font-size: .9375rem; color: #C3CAD1; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.vq-seg label:hover span { border-color: var(--muted); }
.vq-seg input:checked + span { background: var(--white); border-color: var(--white); color: var(--ink); }
.vq-seg input:focus-visible + span { outline: 2px solid var(--cyan); outline-offset: 3px; }
.vq-looks-device { display: grid; place-items: center; }
.vq-looks-device .vq-phone { --pw: min(300px, 70vw); }
.vq-look { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s var(--ease); }

/* ---------- get the app ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.vq-get { position: relative; overflow: hidden; padding-block: clamp(112px, 18vh, 200px); background: radial-gradient(120% 90% at 20% 100%, rgb(40 215 197 / .12), transparent 60%), linear-gradient(180deg, var(--surface), var(--ink)); border-top: 1px solid var(--line); }
.vq-line-get { top: 14%; opacity: .4; }
.vq-get-grid { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 48px 64px; align-items: center; }
.vq-get-copy > p:not(.vq-actions) { margin-top: 20px; max-width: 40ch; color: #C3CAD1; font-size: 1.1875rem; }
.vq-get-copy .vq-actions { margin-top: 32px; }
.vq-get-icon { width: 88px; height: 88px; border-radius: 20px; margin-bottom: 32px; view-transition-name: none; box-shadow: 0 0 0 1px var(--line), 0 24px 60px -20px rgb(40 215 197 / .5); }
.vq-qr { justify-self: end; display: grid; gap: 14px; justify-items: center; max-width: 240px; padding: 20px; border: 1px solid var(--line); border-radius: 24px; background: var(--raise); }
.vq-qr img { width: 200px; height: 200px; border-radius: 12px; }
.vq-qr figcaption { font-size: .875rem; line-height: 1.45; color: var(--muted); text-align: center; }
@media (max-width: 1023px), (hover: none) { .vq-qr { display: none; } }

/* ---------- faq ---------- */
.vq-faq { padding-block: clamp(80px, 12vh, 144px); }
.vq-faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 64px; }
.vq-faq details { border-top: 1px solid var(--line); }
.vq-faq details:last-of-type { border-bottom: 1px solid var(--line); }
.vq-faq summary { display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 64px; cursor: pointer; font-size: 1.125rem; font-weight: 600; list-style: none; }
.vq-faq summary::-webkit-details-marker { display: none; }
.vq-faq summary::after { content: "+"; font-weight: 400; font-size: 1.375rem; color: var(--cyan); transition: transform .2s var(--ease); }
.vq-faq details[open] summary::after { transform: rotate(45deg); }
.vq-faq details p { padding-bottom: 22px; max-width: 58ch; color: #C3CAD1; }
.vq-question { margin-top: 28px; color: var(--muted); }
.vq-question a { color: var(--white); text-underline-offset: 4px; }

/* ---------- footer ---------- */
.vq-footer { padding-block: 40px 48px; border-top: 1px solid var(--line); }
.vq-footer-grid { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.vq-footer-brand { display: flex; align-items: center; gap: 16px; color: var(--muted); font-size: .875rem; }
.vq-footer-brand img { width: 110px; height: auto; }
.vq-footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: .9375rem; }
.vq-footer-links a { text-decoration: none; color: #C3CAD1; padding: 4px 0; }
.vq-footer-links a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 5px; }

/* ---------- responsive ---------- */
@media (max-width: 1023px) {
  .vq-hero-grid, .vq-film-grid, .vq-looks-grid, .vq-get-grid, .vq-faq-grid { grid-template-columns: 1fr; }
  .vq-hero-grid { padding-top: 16px; }
  .vq-not-list { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 1023px), (orientation: portrait) {
  .vq-story-grid { grid-template-columns: 1fr; }
  .vq-story-device { top: var(--hh); z-index: 2; height: auto; padding-block: 12px 28px; background: linear-gradient(var(--ink) 90%, rgb(7 8 10 / 0)); }
  .vq-story-device .vq-phone { --pw: min(200px, calc((100svh - var(--hh)) * .42 * 675 / 1380)); }
  .vq-step { min-height: 62svh; justify-content: flex-start; padding-top: 4svh; }
  .vq-steps { padding-left: 24px; }
}
@media (max-width: 767px) {
  .vq-hero { padding-block: 32px 64px; }
  .vq-hero-device .vq-phone { --pw: min(250px, 64vw); }
  .vq-brandline { margin-bottom: 24px; }
  .vq-line { top: 70%; }
  .vq-actions .vq-button { width: 100%; }
  .vq-step h3 { font-size: 2rem; }
}
/* Looks: the chosen appearance and language (no script needed). */
.vq-look-de-dark { opacity: 1; }
@supports selector(:has(*)) {
  .vq-looks .vq-look-de-dark { opacity: 0; }
  .vq-looks:has(input[value="dark"]:checked):has(input[value="de"]:checked) .vq-look-de-dark,
  .vq-looks:has(input[value="light"]:checked):has(input[value="de"]:checked) .vq-look-de-light,
  .vq-looks:has(input[value="dark"]:checked):has(input[value="en"]:checked) .vq-look-en-dark,
  .vq-looks:has(input[value="light"]:checked):has(input[value="en"]:checked) .vq-look-en-light,
  .vq-looks:has(input[value="dark"]:checked):has(input[value="fr"]:checked) .vq-look-fr-dark,
  .vq-looks:has(input[value="light"]:checked):has(input[value="fr"]:checked) .vq-look-fr-light,
  .vq-looks:has(input[value="dark"]:checked):has(input[value="es"]:checked) .vq-look-es-dark,
  .vq-looks:has(input[value="light"]:checked):has(input[value="es"]:checked) .vq-look-es-light { opacity: 1; }
}
html.motion-off *, html.motion-off *::before, html.motion-off *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}