.passport-hero{width:100%;min-width:0;max-width:520px;color:var(--ink);margin-inline:auto;container:passport-scene/inline-size}.passport-hero__legend{color:color-mix(in oklch, var(--ink) 75%, transparent);justify-content:space-between;align-items:center;padding-inline:12px;display:flex}.passport-hero__stage{perspective:1100px;height:450px}.passport-hero__tilt{height:100%;transform-style:preserve-3d;transition:transform .2s ease-out;position:relative}.passport-hero__slide{transform-style:preserve-3d;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s;position:absolute;inset:0}.passport-hero__slide[data-active=true]{opacity:1;visibility:visible;transition-delay:0s}.passport-hero__product{width:43%;height:205px;position:absolute;top:242px;left:-2%;transform:translateZ(38px)rotate(-5deg)}.passport-hero__controls{justify-content:space-between;align-items:center;gap:10px;min-height:88px;padding-block:10px 16px;display:flex}.passport-hero__selectors{flex-wrap:wrap;gap:6px;display:flex}.passport-hero__controls button{cursor:pointer;border:1px solid color-mix(in oklch, var(--ink) 25%, transparent);border-radius:6px;min-height:44px;padding:8px 10px;font-size:11px;transition:background .18s}.passport-hero__selectors button[aria-pressed=true]{background:var(--ink);color:#fff}.passport-hero__play{flex-shrink:0}.passport-hero__connections{position:absolute;inset:0;transform:translateZ(-60px)}.passport-hero__connections svg{width:100%;height:100%}.passport-hero__connections path{stroke:var(--ink);stroke-width:1.5px;stroke-dasharray:4 5}.passport-hero__connections circle{fill:var(--ink)}.passport-hero__passport-entry{width:57%;transform-style:preserve-3d;position:absolute;top:38px;right:2%}.passport-hero__passport{background:var(--card);border:1px solid color-mix(in oklch, var(--ink) 14%, transparent);box-shadow:2px 3px 0 color-mix(in oklch, var(--card) 80%, var(--ink)), 12px 22px 34px -20px color-mix(in oklch, var(--ink) 32%, transparent);border-radius:12px;padding:22px;transform:rotateY(-7deg)rotate(5deg)translateZ(-12px)}.passport-hero__passport-header{justify-content:space-between;align-items:center;gap:8px;display:flex}.passport-hero__passport-header .label-mono{letter-spacing:.1em;font-size:9px}.passport-hero__status{background:var(--mint-strong);border-radius:50%;flex-shrink:0;width:6px;height:6px}.passport-hero__passport h2{margin-top:20px;font-size:24px;font-weight:600;line-height:1.15}.passport-hero__sample{color:var(--muted-foreground);margin-top:8px;font-size:11px}.passport-hero__details{margin-top:20px}.passport-hero__details>div{border-top:1px solid var(--border);padding-block:11px}.passport-hero__details dt{color:var(--muted-foreground);margin-bottom:4px;font-size:10px}.passport-hero__details dd{font-size:12px;font-weight:500;line-height:1.5}.passport-hero__tag-entry{width:29%;transform-style:preserve-3d;position:absolute;top:38px;left:5%}.passport-hero__tag{border:1px solid color-mix(in oklch, var(--sand) 75%, var(--ink));background:color-mix(in oklch, var(--sand) 40%, var(--card));box-shadow:2px 3px 0 color-mix(in oklch, var(--sand) 70%, var(--ink)), 10px 22px 30px -15px color-mix(in oklch, var(--ink) 35%, transparent);border-radius:30px 30px 9px 9px;padding:40px 12px 15px;position:relative;transform:rotate(-11deg)rotateY(10deg)translateZ(28px)}.passport-hero__hole{background:var(--mint);width:12px;height:12px;box-shadow:inset 1px 2px 2px color-mix(in oklch, var(--ink) 35%, transparent);border-radius:50%;position:absolute;top:17px;left:calc(50% - 6px)}.passport-hero__cord{width:130px;height:85px;position:absolute;top:-55px;left:calc(50% - 65px)}.passport-hero__cord path{stroke:color-mix(in oklch, var(--sand) 60%, var(--ink));stroke-width:2.5px}.passport-hero__logo{gap:5px}.passport-hero__logo svg{width:16px;height:16px}.passport-hero__logo>span{font-size:13px}.passport-hero__tag-heading{letter-spacing:-.04em;margin-block:18px;font-size:21px;font-weight:600;line-height:1.1}.passport-hero__weave{align-items:center;gap:5px;height:30px;margin-block:18px;display:flex}.passport-hero__weave span{border:1px solid var(--mint-strong);width:10px;height:24px;display:block;transform:skewY(-28deg)}.passport-hero__weave span:nth-child(2n){transform:skewY(28deg)}.passport-hero__identifier{border-top:1px solid var(--border);font:10px var(--font-mono);letter-spacing:.06em;padding-top:12px}.passport-hero__tag-note{color:var(--muted-foreground);margin-top:5px;font-size:8px}.passport-hero__caption{border-top:1px solid color-mix(in oklch, var(--ink) 20%, transparent);align-items:center;gap:18px;padding-top:16px;display:flex;position:relative}.passport-hero__qr{border-radius:4px;flex:0 0 104px;width:104px;height:104px}.passport-hero__caption .label-mono{font-size:9px}.passport-hero__sample-link{text-underline-offset:4px;align-items:center;gap:6px;margin-top:8px;font-size:13px;font-weight:600;text-decoration:underline;display:inline-flex}.passport-hero__sample-link svg{flex-shrink:0}.passport-hero__caption-note{color:color-mix(in oklch, var(--ink) 75%, transparent);margin-top:8px;font-size:11px}@keyframes passport-tag-enter{0%{transform:translate(-8px,18px)rotate(-3deg)}to{transform:none}}@keyframes passport-details-enter{0%{opacity:.3;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes passport-connect{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion:no-preference){.passport-hero__tag-entry{animation:.8s cubic-bezier(.2,.7,.2,1) both passport-tag-enter}.passport-hero__connections{animation:.4s .4s both passport-connect}.passport-hero__details{animation:.5s .7s both passport-details-enter}}@container passport-scene (width<=400px){.passport-hero__legend{letter-spacing:.08em;padding-inline:0;font-size:9px}.passport-hero__stage{height:430px}.passport-hero__passport-entry{width:64%;top:24px;right:0}.passport-hero__passport{padding:17px;transform:rotate(2deg)}.passport-hero__passport h2{margin-top:16px;font-size:20px}.passport-hero__details{margin-top:14px}.passport-hero__tag-entry{width:29%;top:60px;left:1%}.passport-hero__tag{border-radius:22px 22px 6px 6px;padding:36px 8px 14px;transform:rotate(-6deg)}.passport-hero__tag-heading{margin-top:16px;font-size:clamp(12px,4cqi,16px)}.passport-hero__logo{gap:3px}.passport-hero__logo svg{width:12px;height:12px}.passport-hero__logo>span{font-size:10px}.passport-hero__cord{width:90px;height:82px;top:-52px;left:calc(50% - 45px)}.passport-hero__weave{gap:3px;height:18px;margin-block:12px}.passport-hero__weave span{width:7px;height:16px}.passport-hero__identifier{letter-spacing:0;padding-top:8px;font-size:8px}.passport-hero__tag-note{display:none}.passport-hero__caption{gap:12px}.passport-hero__sample-link{font-size:12px}.passport-hero__product{width:39%;height:190px;top:220px;left:-3%}.passport-hero__controls{min-height:122px}.passport-hero__selectors{max-width:220px}.passport-hero__controls button{font-size:10px}}@container passport-scene (width<=320px){.passport-hero__stage{height:430px}}@media (prefers-reduced-motion:reduce){.passport-hero__slide{transition:none}.passport-hero__tilt{transition:none;transform:none!important}.passport-hero__tag-entry,.passport-hero__connections,.passport-hero__details{animation:none}}.journey-path{grid-template-columns:repeat(4,minmax(0,1fr));gap:36px;display:grid}.journey-path li{position:relative}.journey-path li:not(:last-child):after{content:"→";color:#6d806b;position:absolute;top:60px;right:-28px}.journey-art{border-bottom:1px solid var(--border);height:140px;margin-bottom:22px}.journey-art svg{width:180px;max-width:100%;height:120px}.use-case-art{aspect-ratio:1.3;width:100%;position:relative}.use-case-art>svg{width:100%;height:100%}.use-case-art>.story-art__product{width:34%;height:55%;position:absolute;bottom:5%;left:31%;transform:rotate(-6deg)}.art-label{font:11px var(--font-mono);text-align:center;color:var(--ink);position:absolute}.story-art__records{top:8%;left:9%}.story-art__maker{bottom:14%;left:12%}.story-art__passport{bottom:8%;right:6%}.partner-art__supplier{top:22%;left:10%}.partner-art__coordinator{top:16%;left:39%}.partner-art__buyer{top:22%;right:11%}.partner-art__records{bottom:16%;left:43%}.sample-art{background:color-mix(in oklch, var(--sand) 40%, var(--background));border-radius:12px 12px 0 0;width:100%;height:210px}.sample-art svg{width:180px;height:200px;margin:auto}@media (width<=639px){.journey-path{grid-template-columns:1fr;gap:32px}.journey-path .marketing-reveal{grid-template-columns:95px 1fr;gap:20px;display:grid}.journey-art{border:0;height:100px;margin:0}.journey-art svg{height:100px}.journey-path li:not(:last-child):after{content:"";background:var(--border);width:1px;height:28px;top:102px;left:47px}.art-label{font-size:9px}}
