/* ==========================================================================
   Veris Capture product page. Builds on veris.css + home.css (nav, buttons,
   section headers, editor, get started, FAQ, footer).
   ========================================================================== */

/* ---------- Hero ---------- */
.chero { padding-top: clamp(40px, 6vw, 88px); overflow-x: clip; }
.chero__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 56px; align-items: center; }
.kick { display: inline-flex; align-items: center; gap: 9px; font: 500 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.kick__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(46,255,213,.14); }
.chero__t { margin-top: 20px; font-size: clamp(40px, 5vw, 68px); }
.chero__t span { display: block; color: var(--mint); }
.chero__lead { margin-top: 22px; max-width: 32rem; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; color: var(--ink-2); }
.chero .hero__cta { margin-top: 34px; }
.has-motion .chero [data-rise]:nth-child(2) { animation-delay: 80ms; }
.has-motion .chero [data-rise]:nth-child(3) { animation-delay: 160ms; }
.has-motion .chero [data-rise]:nth-child(4) { animation-delay: 240ms; }

/* ---------- The phone, modelled on the real Veris Capture screen ---------- */
.cdemo { position: relative; height: 580px; display: grid; place-items: center; }
.has-motion .cdemo { animation: rise 900ms var(--out) 200ms both; }
.cphone { --p: 0; position: relative; width: 280px; height: 556px; padding: 8px; border-radius: 42px; background: #0A1512; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 50px 100px -40px rgba(0,0,0,.85); }
.cphone__scr { position: relative; height: 100%; border-radius: 34px; background: var(--offwhite); display: flex; flex-direction: column; align-items: center; padding-top: 92px; overflow: hidden; transition: background-color 500ms var(--out); }
.cphone__pill { position: relative; z-index: 2; padding: 9px 14px; margin-bottom: -18px; border-radius: 13px; background: var(--inkblack); color: #fff; font: 700 13px/1.2 var(--f-body); text-align: center; max-width: 220px; transition: background-color 250ms var(--out), color 250ms var(--out); }
.cphone__pill.is-ok { background: var(--mint); color: var(--inkblack); }
.cphone__oval { position: relative; width: 200px; height: 252px; }
.cphone__ring { position: absolute; inset: -12px; width: calc(100% + 24px); max-width: none; height: calc(100% + 24px); overflow: visible; }
.cphone__ring path { fill: none; stroke-width: 6; stroke-linecap: round; }
.cphone__track { stroke: var(--hairline); }
.cphone__fill { stroke: #0A8F75; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p)); transition: stroke-dashoffset 700ms var(--inout); }
.cphone__oval img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center 30%; transition: transform 600ms var(--out), filter 400ms var(--out); }
.cphone__ok { position: absolute; right: 2px; bottom: 26px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--mint); box-shadow: 0 0 0 4px var(--offwhite); opacity: 0; transform: scale(.6); transition: opacity 200ms var(--out), transform 420ms var(--spring); }
.cphone__ok svg { width: 20px; fill: none; stroke: var(--inkblack); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.is-passed .cphone__ok { opacity: 1; transform: none; }
.cphone__ft { position: absolute; left: 0; right: 0; bottom: 22px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cphone__spk { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 1px var(--hairline), 0 6px 14px -8px rgba(0,0,0,.25); }
.cphone__spk svg { width: 20px; fill: none; stroke: var(--inkblack); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cphone__pw { font: 500 11.5px/1 var(--f-body); color: var(--sage); }
.cphone__pw b { color: var(--inkblack); font-weight: 700; }

/* ---------- Hero session: a light scans the face, twelve checks float in around the phone in the
   same clockwise order the ring fills, then gather into the signed seal. One continuous ring sweep
   (capture.js drives it with the Web Animations API, so it never steps). ---------- */
.cdemo .cphone__oval img { transform: scale(.84) translateY(10px); transition: transform 1400ms var(--out), filter 400ms var(--out); }
.cdemo.is-live .cphone__oval img, .cdemo.is-passed .cphone__oval img { transform: none; }
.cdemo .cphone__fill { transition: none; }
html:not(.has-motion) .cdemo .cphone__fill { stroke-dashoffset: 0; }

/* the scan: a soft band of light with a dot field that only shows inside it */
.cscan { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 400ms var(--out); }
.cdemo.is-scanning .cscan { opacity: 1; }
.cscan__band { position: absolute; left: 0; right: 0; top: 0; height: 34%; overflow: hidden; translate: 0 -100%;
  background: linear-gradient(180deg, transparent, rgba(46,255,213,.16) 70%, rgba(46,255,213,.34)); }
.cscan__band::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: 0; height: 2px; border-radius: 2px; background: #2EFFD5; box-shadow: 0 0 14px 2px rgba(46,255,213,.75); }
.cscan__dots { position: absolute; left: 0; right: 0; top: 0; height: 294%; /* the oval's height, seen through the moving band */
  background: radial-gradient(rgba(255,255,255,.9) .9px, transparent 1.3px) 0 0 / 11px 11px; mix-blend-mode: overlay; opacity: .9; translate: 0 34%; }
.has-motion .cdemo.is-scanning .cscan__band { animation: c-band 1900ms var(--inout) infinite alternate; }
.has-motion .cdemo.is-scanning .cscan__dots { animation: c-dots 1900ms var(--inout) infinite alternate; }
@keyframes c-band { from { translate: 0 -100%; } to { translate: 0 294%; } }
@keyframes c-dots { from { translate: 0 34%; } to { translate: 0 -100%; } }

.cphone__count { margin-top: 18px; font: 500 12px/1 var(--f-mono); color: var(--sage); letter-spacing: .02em; transition: opacity 300ms var(--out); }
.cphone__count b { color: var(--inkblack); font-weight: 600; font-variant-numeric: tabular-nums; }
.cdemo.is-passed .cphone__count { opacity: 0; }

/* the twelve checks */
.cchips { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.cchips li { position: absolute; left: calc(50% + var(--x)); top: calc(50% + var(--y)); translate: -50% -50%;
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px 8px 9px; border-radius: 999px; white-space: nowrap;
  font: 600 12.5px/1 var(--f-body); color: #E8F7F1;
  background: rgba(16,37,31,.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 18px 34px -18px rgba(0,0,0,.9);
  opacity: 0; transform: translate(calc(var(--x) * -.12), calc(var(--y) * -.12)) scale(.9); }
.cchips li::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; scale: .4;
  background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317211D' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat; }
.cchips li.on { opacity: 1; transform: none; transition: opacity 260ms var(--out), transform 520ms var(--out); }
.cchips li.on::before { scale: 1; transition: scale 420ms var(--spring) 80ms; }
/* gathering: every check flies into the seal */
.cdemo.is-gather .cchips li { opacity: 0; transform: translate(var(--gx, 0), var(--gy, 0)) scale(.35);
  transition: transform 640ms var(--inout) calc(var(--k, 0) * 28ms), opacity 300ms var(--out) calc(var(--k, 0) * 28ms + 320ms); }
.cdemo.is-instant .cchips li, .cdemo.is-instant .cchips li::before, .cdemo.is-instant .csig, .cdemo.is-instant .cphone__oval img { transition: none !important; }

/* the seal stamped on the screen */
.csig { position: absolute; left: 0; bottom: 70px; z-index: 3; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 16px; background: var(--offwhite); color: var(--inkblack); box-shadow: 0 24px 50px -24px rgba(0,0,0,.8); opacity: 0; transform: translateY(10px) scale(.97); transition: opacity 250ms var(--out), transform 450ms var(--spring); }
.csig b { display: flex; align-items: center; gap: 7px; font: 700 13.5px/1.2 var(--f-display); }
.csig b svg { width: 16px; height: 16px; padding: 3px; border-radius: 50%; background: var(--mint); fill: none; stroke: var(--inkblack); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.csig code { font: 500 11.5px/1.4 var(--f-mono); color: #0A6B58; }
.csig em { margin-top: 2px; font: 500 10.5px/1 var(--f-mono); font-style: normal; letter-spacing: .04em; color: var(--sage); }
.cdemo > .csig { left: 50%; bottom: 74px; translate: -50% 0; width: max-content; white-space: nowrap; align-items: center; text-align: center; padding: 14px 20px 13px; transform: scale(.7); }
.cdemo > .csig::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px var(--mint); opacity: 0; }
.cdemo.is-signed > .csig { opacity: 1; transform: none; transition: opacity 200ms var(--out), transform 560ms var(--spring); }
.has-motion .cdemo.is-signed > .csig::before { animation: c-stamp 900ms var(--out) 120ms; }
@keyframes c-stamp { from { opacity: .9; scale: 1; } to { opacity: 0; scale: 1.35 1.6; } }
html:not(.has-motion) .cdemo .cchips li { opacity: 1; transform: none; }
html:not(.has-motion) .cdemo .cchips li::before { scale: 1; }

/* the play button is for phones only (see the responsive block) */
.cdemo__go { display: none; }

/* ---------- Problem ---------- */
.cprob { padding-top: clamp(96px, 12vw, 150px); }
.cprob__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cprob__c { display: flex; flex-direction: column; gap: 16px; padding: 28px 26px 30px; border-radius: 24px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.cprob__n { font: 500 12px/1 var(--f-mono); color: var(--ink-3); }
.cprob__q { font: 700 clamp(20px, 1.8vw, 24px)/1.25 var(--f-display); letter-spacing: -.02em; text-wrap: balance; }
.cprob__a { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.cprob__a .pc { margin-right: 8px; vertical-align: 1px; }

/* ---------- Six layers: the phone stays put while the layers scroll past ---------- */
.layers { padding-top: clamp(96px, 12vw, 150px); }
.layers__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
.layers__stage { position: sticky; top: 96px; height: calc(100vh - 140px); max-height: 640px; min-height: 560px; display: grid; place-items: center; border-radius: 28px; background: radial-gradient(70% 60% at 50% 30%, rgba(46,255,213,.06), transparent 70%), var(--forest); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.cphone--stage { transform: scale(.9); }
.layers__list { list-style: none; margin: 0; padding: 0; }
.layer { padding: 40px 0 44px; border-top: 1px solid var(--line); min-height: 48vh; opacity: .38; transition: opacity 300ms var(--out); }
.layer:last-child { min-height: 56vh; } /* room for the last layer to reach the middle while the phone is still pinned */
.layer.is-on { opacity: 1; }
.layer__n { display: flex; align-items: center; gap: 12px; font: 500 12px/1 var(--f-mono); color: var(--ink-3); }
.plan { padding: 5px 9px; border-radius: var(--rf); background: rgba(46,255,213,.12); color: var(--mint); font: 600 11.5px/1 var(--f-body); }
.layer h3 { margin-top: 16px; font: 700 clamp(24px, 2.3vw, 32px)/1.12 var(--f-display); letter-spacing: -.03em; }
.layer p:not(.layer__n) { margin-top: 12px; max-width: 30rem; font-size: 16px; line-height: 1.6; color: var(--ink-2); }

/* stage states (one per layer) */
.cphone__scan { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity 300ms var(--out); }
.cphone__scan::after { content: ""; position: absolute; left: 0; right: 0; top: -20%; height: 22%; background: linear-gradient(180deg, transparent, rgba(46,255,213,.45), transparent); }
.cphone__dir { position: absolute; left: 14px; top: 196px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--inkblack); opacity: 0; transform: translateX(8px); transition: opacity 250ms var(--out), transform 400ms var(--out); }
.cphone__dir svg { width: 20px; fill: none; stroke: var(--mint); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.csig--stage { left: auto; right: -96px; bottom: 120px; }
[data-layer="1"] { --p: 34; }
[data-layer="1"] .cphone__oval img { transform: scale(.78); }
[data-layer="2"] { --p: 52; }
[data-layer="3"] { --p: 68; }
[data-layer="3"] .cphone__scan { opacity: 1; }
.has-motion [data-layer="3"] .cphone__scan::after { animation: scan 1600ms var(--inout) infinite; }
@keyframes scan { to { top: 100%; } }
[data-layer="4"] { --p: 80; }
.has-motion [data-layer="4"] .cphone__scr { animation: flash 1800ms steps(1) infinite; }
@keyframes flash { 0% { background-color: var(--offwhite); } 25% { background-color: #DDF7EE; } 50% { background-color: #F2F6F1; } 75% { background-color: #E3EFE9; } }
[data-layer="5"] { --p: 92; }
[data-layer="5"] .cphone__dir { opacity: 1; transform: none; }
.has-motion [data-layer="5"] .cphone__oval img { animation: turn 1600ms var(--inout) infinite alternate; }
@keyframes turn { from { transform: translateX(0) scale(1); } to { transform: translateX(-10px) scale(.98); } }
[data-layer="6"] { --p: 100; }
[data-layer="6"] .cphone__ok, [data-layer="6"] .csig { opacity: 1; transform: none; }

/* ---------- What your server gets ---------- */
.cget { padding-top: clamp(96px, 12vw, 150px); }
.cget__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.cget__states { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cget__states .st { background: var(--bg-2); }
.cget__states .st > code { background: var(--bg-3); }
.cget__states .st--ok > code { background: var(--mint); }
.cget__code { display: flex; flex-direction: column; border-radius: 22px; background: #0B1C17; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); overflow: hidden; }
.cget__bar { display: flex; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); font: 600 12.5px/1 var(--f-mono); color: var(--ink); }
.cget__bar em { font-style: normal; color: var(--mint); }
.cget__code pre { margin: 0; padding: 18px 20px; font: 400 13.5px/1.8 var(--f-mono); color: var(--ink-2); white-space: pre; overflow-x: auto; }
.cget__code .k { color: #9EEFDD; } .cget__code .v { color: var(--ink); } .cget__code .n { color: var(--mint); }
.cget__note { margin-top: auto; padding: 14px 18px; border-top: 1px solid var(--line); font: 500 12.5px/1.6 var(--f-mono); color: var(--ink-3); }
.cget__note span { color: var(--ink); }
.cget__note code { color: var(--mint); }
.cget__fine { padding: 0 18px 16px; font-size: 12.5px; color: var(--ink-3); }

/* ---------- Plans ---------- */
.cplans { padding-top: clamp(96px, 12vw, 150px); }
.ctab { overflow-x: auto; border-radius: 22px; box-shadow: inset 0 0 0 1px var(--line); scrollbar-width: thin; }
.ctab:focus-visible { outline-offset: 2px; }
.ctab table { width: 100%; min-width: 720px; border-collapse: collapse; }
.ctab th, .ctab td { padding: 15px 16px; text-align: center; font-size: 14.5px; border-bottom: 1px solid var(--line); }
.ctab tbody tr:last-child th, .ctab tbody tr:last-child td { border-bottom: 0; }
.ctab thead th { padding-top: 20px; font: 700 16px/1.2 var(--f-display); color: var(--ink); }
.ctab thead th small { display: block; margin-top: 4px; font: 500 12.5px/1 var(--f-body); color: var(--ink-3); }
.ctab tbody th { text-align: left; font-weight: 500; color: var(--ink-2); }
.ctab td { color: var(--ink); }
.ctab td.n { color: var(--ink-3); }
.ctab td.y { color: var(--mint); font-weight: 600; }
.ctab .is-pick { background: rgba(46,255,213,.06); }
.ctab thead .is-pick { box-shadow: inset 0 2px 0 var(--mint); }
.ctab__ft { margin-top: 18px; font-size: 14.5px; color: var(--ink-3); }
.ctab__ft a { color: var(--mint); font-weight: 600; text-decoration: none; }

/* ---------- Responsive ---------- */
@media (min-width: 1021px) and (max-width: 1180px) { .cdemo { zoom: .86; } }
@media (max-width: 1020px) {
  .chero__in { grid-template-columns: 1fr; }
  .cdemo { height: 600px; }
  .cprob__list { grid-template-columns: 1fr; }
  .layers__in { grid-template-columns: 1fr; gap: 0; }
  /* phones and tablets: the phone sits above a row of layer cards; swiping a card changes the phone */
  .layers__stage { position: relative; top: auto; height: 440px; min-height: 0; max-height: none; margin-bottom: 14px; overflow: hidden; place-content: center; }
  .cphone--stage { transform: scale(.72); }
  .csig--stage { right: auto; left: 50%; translate: -50% 0; bottom: 64px; }
  .layers__list { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 6px; scroll-padding-inline: var(--gutter); }
  .layers__list::-webkit-scrollbar { display: none; }
  .layer, .layer:last-child { flex: 0 0 min(84%, 440px); min-height: 0; scroll-snap-align: start; padding: 22px 22px 24px; border-top: 0; border-radius: 22px;
    background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); opacity: .5; transition: opacity 300ms var(--out), box-shadow 300ms var(--out), transform 160ms var(--out); }
  .layer.is-on { opacity: 1; box-shadow: inset 0 0 0 1px rgba(46,255,213,.32); }
  .layer:active { transform: scale(.98); }
  .layer h3 { margin-top: 14px; }
  .layers .rowdots { display: flex; justify-content: center; gap: 6px; margin-top: 18px; }
  .layers .rowdots i { width: 6px; height: 6px; border-radius: 3px; background: var(--line-2); transition: width 200ms var(--out), background-color 200ms var(--out); }
  .layers .rowdots i.is-on { width: 18px; background: var(--mint); }
  .cget__grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  /* phones: the session is something you start with a tap; the checks sit under the phone and light up */
  .cdemo { height: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 8px; }
  .cdemo .cphone { margin: 0; transform: scale(.88); margin-block: -32px; }
  .cchips { order: 2; position: relative; inset: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; max-width: 380px; padding-top: 6px; }
  .cchips li { position: relative; left: auto; top: auto; translate: none; padding: 7px 11px 7px 7px; font-size: 12px; color: var(--ink-2);
    background: var(--bg-2); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px var(--line); opacity: .45; transform: none; }
  .cchips li:not(.on)::before { scale: 1; background: none; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22); }
  .cchips li.on { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(46,255,213,.3); }
  .cdemo > .csig { bottom: auto; top: 372px; }
  .cdemo__go { order: 1; position: relative; z-index: 4; margin-top: 4px; display: inline-flex; align-items: center; gap: 9px; height: 48px; white-space: nowrap; padding: 0 20px 0 16px;
    border: 0; border-radius: 999px; background: var(--bg-2); color: var(--ink); font: 700 15px/1 var(--f-body); cursor: pointer;
    box-shadow: inset 0 0 0 1px var(--line-2), 0 0 0 0 rgba(46,255,213,0); transition: opacity 220ms var(--out), transform 160ms var(--out); }
  .cdemo__go svg { flex: none; width: 13px; height: 13px; fill: var(--mint); stroke: none; }
  .cdemo__go:active { transform: scale(.96); }
  .has-motion .cdemo:not(.is-running) .cdemo__go { animation: c-nudge 2400ms var(--inout) 1200ms infinite; }
  @keyframes c-nudge { 0%, 70%, 100% { box-shadow: inset 0 0 0 1px var(--line-2), 0 0 0 0 rgba(46,255,213,0); } 35% { box-shadow: inset 0 0 0 1px rgba(46,255,213,.5), 0 0 0 8px rgba(46,255,213,.12); } }
  .cdemo.is-running .cdemo__go { opacity: .35; pointer-events: none; }
  .cget__states { grid-template-columns: 1fr; }
  .layer h3 { font-size: 24px; }
}
html:not(.has-motion) .cdemo__go { display: none !important; }