/* VINPassport site styles.
   Extracted from the Industry design system (blueprint frame) plus the page-level
   tokens the designs use. Every other style in the pages is inline and deliberate:
   see CLAUDE.md before changing anything here. */

:root{
  --color-bg:#EDE4D8;        /* cream ground, from the logo */
  --color-surface:#E6DCCE;   /* input / recessed fill */
  --color-text:#0E1726;      /* near-black ink */
  --color-accent:#004AAD;    /* brand blue */
  --color-accent-100:#DCE6F5;
  --color-accent-600:#003C8F;
  --color-accent-700:#002E6E;
  --color-periwinkle:#8B95FF;/* second brand tone: demo, refusal, not-proven */
  --color-divider:rgba(0,74,173,.26);
  --edge:clamp(20px,5vw,72px);
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--color-bg);color:var(--color-text);
  font-family:Barlow,system-ui,sans-serif;text-wrap:pretty;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Barlow Condensed',sans-serif;font-weight:600}
img{max-width:100%;height:auto}
a{color:var(--color-accent);text-underline-offset:3px}
a:hover{color:var(--color-accent-700)}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{
  outline:2px solid var(--color-accent);outline-offset:2px}
::selection{background:var(--color-accent-100)}

.mono{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace}

/* Blueprint frame: square, transparent, hairline, with registration marks.
   Requires four <i class="corner tl|tr|bl|br"></i> children. Do not remove them. */
.blueprint{position:relative;border:1px solid var(--color-divider);border-radius:0}
.blueprint>.corner{position:absolute;width:11px;height:11px;color:rgba(0,74,173,.6)}
.blueprint>.corner::before,.blueprint>.corner::after{content:"";position:absolute;background:currentColor}
.blueprint>.corner::before{left:5px;top:0;width:1px;height:100%}
.blueprint>.corner::after{top:5px;left:0;width:100%;height:1px}
.blueprint>.corner.tl{top:-6px;left:-6px}
.blueprint>.corner.tr{top:-6px;right:-6px}
.blueprint>.corner.bl{bottom:-6px;left:-6px}
.blueprint>.corner.br{bottom:-6px;right:-6px}

/* Phone artboards scroll internally without painting a scrollbar. */
.noscroll{scrollbar-width:none;-ms-overflow-style:none}
.noscroll::-webkit-scrollbar{width:0;height:0;display:none}

/* Mockup gallery page only. */
.mockup-board{background:#e4dccf;min-height:100vh}
.dv-turn{padding:44px 46px 36px;border-bottom:1px solid rgba(0,0,0,.1)}
.dv-thd{display:flex;align-items:baseline;gap:10px;margin:0 0 6px}
.dv-tid{font:600 10px ui-monospace,Menlo,monospace;padding:3px 7px;background:#0E1726;color:#EDE4D8;text-decoration:none}
.dv-tname{font:600 15px Barlow,sans-serif;color:#0E1726}
.dv-opts{display:flex;flex-wrap:wrap;gap:34px;align-items:flex-start}
.dv-opt{flex:none;display:flex;flex-direction:column;gap:10px;scroll-margin-top:16px}
.dv-oid{font:600 10.5px ui-monospace,Menlo,monospace;padding:3px 7px;background:rgba(0,74,173,.12);color:#004AAD;text-decoration:none}
.dv-olabel{display:flex;align-items:baseline;gap:8px;font:400 11.5px Barlow,sans-serif;color:rgba(14,23,38,.6)}
.dv-opt:target .dv-oid{background:#004AAD;color:#EDE4D8}
.dv-next{margin:26px 0 0;font:12.5px/1.6 Barlow,sans-serif;color:rgba(14,23,38,.6)}

/* --- App surfaces: /intake/, /proofs/, /verify/ --- */

/* Intake form primitives */
.lbl{display:block;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:rgba(14,23,38,.6);margin-bottom:4px}
.inp{width:100%;min-height:44px;padding:8px 11px;font-size:14.5px;font-family:inherit;
  background:var(--color-surface);border:1px solid rgba(0,74,173,.28);color:var(--color-text);border-radius:0}
.inp:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}

/* Numbered section header: kicker + title + right-aligned slot note over a full rule */
.sect{display:flex;align-items:baseline;gap:10px;border-bottom:1px solid var(--color-divider);padding-bottom:6px;margin-bottom:14px}
.snum{font-family:ui-monospace,Consolas,monospace;font-size:11px;color:var(--color-accent)}
.stitle{margin:0;font-family:'Barlow Condensed',sans-serif;font-size:clamp(19px,2.4vw,23px);letter-spacing:.01em}
.smeta{margin-left:auto;font-size:11px;color:rgba(14,23,38,.5);text-align:right}

/* Proof-explorer state chips and claim rows */
.chip{flex:none;display:inline-block;line-height:1.2;white-space:nowrap;
  font:600 10.5px Barlow,sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px}
.chip-cur{background:var(--color-accent);color:var(--color-bg)}
.chip-sup{background:var(--color-periwinkle);color:var(--color-text)}
.claim{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;padding:12px 15px;
  border-bottom:1px solid rgba(0,74,173,.12)}

/* Verification verdict rows. .tick is a proven claim, .none is "not proven" (never a no). */
.row{display:flex;gap:13px;padding:14px 0;border-top:1px solid rgba(0,74,173,.16);align-items:flex-start}
.tick{flex:none;width:27px;height:27px;background:var(--color-accent);color:var(--color-bg);display:grid;place-items:center}
.none{flex:none;width:27px;height:27px;border:1px dashed rgba(14,23,38,.42);display:grid;place-items:center;
  color:rgba(14,23,38,.5);font-size:15px}

/* Explainer video: one cut per orientation. The pages set the default
   display inline (desktop cut visible), so the swap needs !important. */
@media (max-width:700px){
  .vid-desktop{display:none!important}
  .vid-mobile{display:block!important}
}

/* Mobile nav: brand and the action button only; section links are desktop. */
@media (max-width:700px){
  .nav-sec{display:none}
}

/* Footer meta: right-aligned on wide screens; on mobile it wraps, so let it
   sit flush left under the brand line instead of floating mid-air. */
@media (max-width:700px){
  .ft-meta{margin-left:0!important;flex-basis:100%}
}