/* Scout homepage. Uses only the roles in scout-system.css. Revised 15 October 2026 from Shane's review. */

/* ---------- Shared ---------- */
.num { color: var(--accent); font-size: 13px; margin-bottom: var(--s-16); }

/* ---------- Navigation ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background-color .3s var(--ease), border-color .3s var(--ease); border-bottom: 1px solid transparent; }
/* As HQ (measured 15 October 2026): full width, 40px from each edge, transparent over the hero, solid black with a hairline once scrolled, always visible */
.nav.scrolled { background: var(--black); border-bottom-color: rgba(233, 240, 242, .08); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; padding: 0 var(--s-40); }
.nav-logo img { height: 26px; width: auto; }
.nav-links { display: flex; align-items: center; gap: var(--s-32); font-size: 14px; font-weight: 500; }
.nav-links > a:not(.btn) { color: var(--light); text-decoration: none; opacity: .9; }
.nav-links > a:not(.btn):hover { opacity: 1; }
.nav-lang { display: inline-flex; gap: 6px; color: var(--n-400); }
.nav-lang a { text-decoration: none; color: var(--n-300); }
.nav-lang a[aria-current="true"] { color: var(--light); }
.nav-menu { display: none; background: none; border: 1px solid rgba(233,240,242,.4); color: var(--light); font: 600 14px var(--font-ui); height: 40px; padding: 0 var(--s-16); border-radius: var(--r-sm); }
.nav-drawer { display: grid; gap: var(--s-24); padding: var(--s-24) var(--s-16) var(--s-40); background: rgba(0,3,5,.96); border-bottom: 1px solid var(--line); }
.nav-drawer > a:not(.btn) { color: var(--light); text-decoration: none; font: 500 20px var(--font-display); }
.nav-drawer .nav-lang { gap: var(--s-24); font-size: 15px; }
.nav-drawer[hidden] { display: none; }

/* ---------- 1. Hero ---------- */
.hero { position: relative; height: 100vh; min-height: 640px; overflow: hidden; }
.hero-art { position: absolute; inset: -4% 0 0 0; will-change: transform; }
.hero-art img { width: 100%; height: 108%; object-fit: cover; object-position: 50% 62%; animation: hero-drift 28s ease-in-out infinite alternate; }
@keyframes hero-drift { from { transform: scale(1.04); } to { transform: scale(1.1) translateX(-1%); } }
/* Legibility: a soft dark wash under the promise (bottom left), plus a top fade for the menu */
.hero-shade { position: absolute; inset: 0; background:
  radial-gradient(55% 65% at 14% 80%, rgba(0,3,5,.66) 0%, rgba(0,3,5,.34) 50%, rgba(0,3,5,0) 80%),
  linear-gradient(180deg, rgba(0,3,5,.45) 0%, rgba(0,3,5,0) 18%, rgba(0,3,5,0) 62%, rgba(0,3,5,.5) 100%); }
/* Resting hero (Shane, 15 October 2026): the big logo moment is the entrance, so the hero carries only the promise, bottom left */
.hero-copy { position: absolute; z-index: 3; left: var(--s-40); bottom: clamp(72px, 12vh, 128px); width: min(640px, 50vw); }
.hero-copy h1 { font-size: min(88px, 4.6vw); font-weight: 500; line-height: 1.04; text-shadow: 0 2px 24px rgba(0, 3, 5, .4); }
.hero-copy h1 .line { display: block; white-space: nowrap; }
.hero-lead { margin-top: var(--s-16); max-width: 27em; font-size: 16px; line-height: 1.5; color: var(--white); text-shadow: 0 1px 12px rgba(0, 3, 5, .6); }
.hero-ctas { margin-top: var(--s-24); display: flex; gap: var(--s-8); flex-wrap: wrap; }

/* ---------- The entrance: the painting through the SCOUT letters, then a zoom through the T ---------- */
.intro { display: none; }
.intro-on .intro, .intro.playing { display: block; position: fixed; inset: 0; z-index: 100; transition: opacity .5s var(--ease); }
.intro.done { opacity: 0; pointer-events: none; }
.intro-svg { width: 100%; height: 100%; }
.intro-black { fill: var(--black); }
.intro-on body { overflow: hidden; }
.nav { transition: background-color .3s var(--ease), border-color .3s var(--ease), opacity .8s var(--ease); }
.intro-on .nav, .intro-on .hero .reveal { opacity: 0 !important; }
/* The painting is seen at full strength through the letters; the text wash arrives with the text */
.hero-shade { transition: opacity 1s var(--ease); }
.intro-on .hero-shade { opacity: 0; }

/* ---------- 2. What it is ---------- */
.what-lead { margin-top: var(--s-24); max-width: 36em; }
.what-video { margin-top: var(--s-64); padding: clamp(16px, 3vw, 48px); border-radius: var(--r-lg);
  background: radial-gradient(120% 90% at 20% 0%, var(--teal-800) 0%, var(--teal-900) 45%, var(--n-900) 100%); }
.what-frame { position: relative; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line-strong); box-shadow: 0 40px 120px rgba(0,0,0,.55); }
.what-frame img { width: 100%; height: auto; }
.what-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 80px; height: 80px; border-radius: 50%; border: 0; background: var(--white); cursor: pointer; box-shadow: 0 10px 40px rgba(0,0,0,.4); transition: transform .3s var(--ease); }
.what-play:hover { transform: translate(-50%,-50%) scale(1.06); }
.what-play span { display: block; margin-left: 31px; width: 0; height: 0; border-left: 20px solid var(--black); border-top: 13px solid transparent; border-bottom: 13px solid transparent; }
.what-works { margin-top: var(--s-40); display: flex; align-items: center; gap: var(--s-24); flex-wrap: wrap; }
.file-types { list-style: none; padding: 0; margin: 0; display: flex; gap: var(--s-16); flex-wrap: wrap; }
.ft { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 var(--s-16) 0 12px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); color: var(--text-2); font-size: 14px; }
.ft svg { width: 20px; height: 20px; fill: none; stroke: var(--cyan); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 3. Why ---------- */
.why-grid { margin-top: var(--s-64); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-48); }
.why-item { border-top: 1px solid var(--line-strong); padding-top: var(--s-24); }
.why-item h3 { margin-bottom: var(--s-8); }

/* ---------- 4. The story ---------- */
.story { position: relative; height: 600vh; }
.story-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.story-art { position: absolute; inset: 0; }
.story-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; transform: scale(1.06); transition: transform 1.2s var(--ease); }
.story.s4 .story-art img { transform: scale(1.12); }
.story-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,3,5,.72) 0%, rgba(0,3,5,.2) 26%, rgba(0,3,5,.15) 70%, rgba(0,3,5,.7) 100%); transition: background-color .8s var(--ease); }
.story.s4 .story-shade { background-color: rgba(0, 3, 5, .62); }
.story-head { position: relative; z-index: 3; padding-top: 112px; }
.story-steps { position: absolute; z-index: 3; left: var(--gutter); bottom: 8vh; width: min(300px, 22vw); margin: 0; padding: var(--s-24); list-style: none; display: grid; gap: var(--s-16);
  background: rgba(0,3,5,.62); border: 1px solid var(--glass-line); border-radius: var(--r-md); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.story-steps li { font: 500 15px/1.35 var(--font-ui); color: rgba(233,240,242,.5); padding-left: var(--s-16); border-left: 2px solid rgba(233,240,242,.18); transition: color .4s var(--ease), border-color .4s var(--ease); }
.story-steps li.on { color: var(--white); border-left-color: var(--accent); }
.story-steps li.done { color: rgba(233,240,242,.72); }

/* The product window */
.app { position: absolute; z-index: 2; left: 50%; top: 55%; width: min(880px, 60vw); height: min(640px, 70vh);
  transform: translate(-30%, -50%); display: grid; grid-template-columns: 168px 1fr;
  background: var(--black); border: 1px solid var(--line-strong); border-radius: 14px; overflow: hidden;
  box-shadow: 0 50px 140px rgba(0, 0, 0, .6); font-family: var(--font-ui); color: var(--text);
  transition: transform .9s var(--ease), opacity .7s var(--ease); }
.app-rail { border-right: 1px solid var(--line); padding: 20px 14px; }
.app-mark { width: 34px; margin: 2px 0 28px 4px; }
.app-rail ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.app-rail li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--n-300); padding: 8px; border-radius: 6px; }
.app-rail li.on { color: var(--accent); }
.ico { width: 14px; height: 14px; border: 1.5px solid currentColor; border-radius: 3px; opacity: .9; }
.ico-trades { border-radius: 50%; }
.ico-org { border-radius: 50% 50% 3px 3px; }
.app-main { position: relative; padding: 20px 32px 0; overflow: hidden; }
.app-top { display: flex; justify-content: flex-end; align-items: center; gap: 10px; font-size: 12px; color: var(--n-200); }
.app-avatar { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; font-size: 10px; font-weight: 600; }

.pane { position: absolute; left: 32px; right: 32px; top: 68px; bottom: 24px; transition: opacity .6s var(--ease), transform .6s var(--ease); }
.pane-title { font: 600 22px/1.2 var(--font-ui); letter-spacing: -0.02em; margin-bottom: 28px; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.form label { display: grid; gap: 8px; }
.form label span { font-size: 12px; color: var(--n-300); }
.form b { display: block; height: 44px; line-height: 42px; padding: 0 14px; border: 1px solid var(--n-800); border-radius: 8px; font-weight: 500; font-size: 14px; color: var(--light); white-space: nowrap; overflow: hidden; }
.form b::after { content: ""; display: inline-block; width: 1px; height: 16px; background: var(--accent); vertical-align: -3px; margin-left: 1px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.fake-btn { display: inline-flex; margin-top: 32px; height: 40px; align-items: center; padding: 0 18px; border-radius: 8px; background: var(--teal-500); color: var(--black); font-weight: 600; font-size: 14px; }

.pane-trade { display: flex; flex-direction: column; opacity: 0; transform: translateY(14px); }
.story.s1 .pane-add { opacity: 0; transform: translateY(-14px); pointer-events: none; }
.story.s1 .pane-trade { opacity: 1; transform: none; }
.trade-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.trade-name { font: 600 22px/1.2 var(--font-ui); letter-spacing: -0.02em; }
.trade-ref { font-size: 13px; color: var(--n-300); }
.trade-state { font-size: 12px; color: var(--n-200); }
.trade-meta { margin-top: 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.trade-meta span { display: block; font-size: 11px; color: var(--n-400); margin-bottom: 4px; }
.trade-meta b { font-size: 13px; font-weight: 500; }

/* The documents card: room to breathe, rows never shrink; the list pans when it outgrows the card */
.docs { position: relative; margin-top: 24px; flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: var(--n-900); border: 1px solid var(--line); border-radius: 14px; padding: 24px 28px 8px; }
.docs-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.docs-title { font-size: 14px; font-weight: 600; }
.docs-from { font-size: 12px; color: var(--n-400); margin-top: 4px; }
.docs-count { font-size: 13px; color: var(--n-200); }
.docs-count b { color: var(--white); font-weight: 600; }
.doc-view { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.doc-rows { list-style: none; margin: 0; padding: 0; will-change: transform; }
.doc-rows li { display: grid; grid-template-columns: 1fr auto 80px; align-items: center; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); font-size: 13px;
  opacity: 0; transform: translateX(-10px); transition: opacity .45s var(--ease), transform .45s var(--ease), color .4s var(--ease), background-color .5s var(--ease); }
.story.s1 .doc-rows li { opacity: 1; transform: none; }
.story.s1 .doc-rows li:nth-child(2) { transition-delay: .05s; } .story.s1 .doc-rows li:nth-child(3) { transition-delay: .1s; }
.story.s1 .doc-rows li:nth-child(4) { transition-delay: .15s; } .story.s1 .doc-rows li:nth-child(5) { transition-delay: .2s; }
.story.s1 .doc-rows li:nth-child(6) { transition-delay: .25s; } .story.s1 .doc-rows li:nth-child(7) { transition-delay: .3s; }
.story.s1 .doc-rows li:nth-child(8) { transition-delay: .35s; }
.doc-due { font-size: 12px; color: var(--n-400); }
.doc-state { justify-self: end; font-size: 12px; font-weight: 600; color: var(--light); }
.doc-state::before { content: "Add"; }
.doc-rows li.added .doc-state { color: var(--accent); }
.doc-rows li.added .doc-state::before { content: "✓ Added"; }
.doc-rows li.added .doc-name { color: var(--n-300); }
.doc-rows li.flash { background-color: rgba(0, 224, 224, .08); }
.story.s3 .doc-rows li.added { opacity: .42; }
.story.s3 .doc-rows li[data-miss] .doc-due { color: var(--due); }
.story.s3 .doc-rows li[data-miss] .doc-name { color: var(--white); font-weight: 600; }

/* Step 2: files dragged in from outside, dropped onto the card, then filed row by row */
.drop-zone { position: absolute; inset: 10px; border-radius: 10px; border: 1.5px dashed var(--accent); background: rgba(0, 50, 54, .82);
  display: grid; place-items: center; opacity: 0; pointer-events: none; }
.drop-zone span { font-weight: 600; font-size: 15px; color: var(--teal-100); }
.drag { position: absolute; left: 0; top: 0; width: 220px; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.dfile { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 6px; border-radius: 8px; white-space: nowrap;
  background: var(--n-850); border: 1px solid var(--teal-700); font-size: 12px; color: var(--light); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.dfile i { font-style: normal; font-size: 10px; font-weight: 600; background: var(--teal-800); color: var(--teal-100); padding: 3px 5px; border-radius: 4px; }
.dfile:nth-child(1) { transform: translate(8px, 8px) rotate(-4deg); }
.dfile:nth-child(2) { transform: translate(6px, 6px) rotate(-2deg); }
.dfile:nth-child(3) { transform: translate(4px, 4px) rotate(1deg); }
.dfile:nth-child(4) { transform: translate(2px, 2px) rotate(3deg); }
.dfile:nth-child(5) { transform: translate(0, 0); }
.dcount { position: absolute; left: 150px; top: -10px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--black); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.cursor { position: absolute; left: 120px; top: 22px; }

/* The finale: every trade's documents gathering into the falcon */
.story.s4 .app { opacity: 0; transform: translate(-30%, -50%) scale(.6); }
.flock { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.flock-falcon { position: absolute; left: 58%; top: 52%; width: min(500px, 44vw); transform: translate(-50%, -50%); opacity: 0; }
.flock-falcon path { fill: var(--teal-500); }
.flock-falcon path:last-child { fill: var(--cyan); }
.flock-cards { position: absolute; inset: 0; }
.chip { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 8px; border-radius: 8px;
  background: rgba(5, 11, 16, .9); border: 1px solid var(--line-strong); font: 500 12px var(--font-ui); color: var(--light); white-space: nowrap; opacity: 0; will-change: transform, opacity; }
.chip i { width: 11px; height: 14px; flex: none; background: linear-gradient(var(--black), var(--black)) 2px 6px / 6px 1px no-repeat, linear-gradient(var(--black), var(--black)) 2px 9px / 6px 1px no-repeat, var(--accent);
  clip-path: polygon(0 0, 64% 0, 100% 30%, 100% 100%, 0 100%); }
.chip i.due { background: linear-gradient(var(--black), var(--black)) 2px 6px / 6px 1px no-repeat, linear-gradient(var(--black), var(--black)) 2px 9px / 6px 1px no-repeat, var(--due); }
.chip b { font-weight: 500; }

/* ---------- 5. What it does ---------- */
.does-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-24); }
.does-arrows { display: flex; gap: var(--s-8); flex: none; }
.arrow { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-strong); background: none; color: var(--light); font-size: 22px; cursor: pointer; }
.arrow:hover { border-color: var(--light); }
.does-track { margin-top: var(--s-64); display: flex; gap: var(--s-48); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 0 var(--gutter) var(--s-8); scroll-padding: 0 var(--gutter); }
@media (min-width: 1440px) { .does-track { padding-left: calc((100vw - var(--max)) / 2); scroll-padding-left: calc((100vw - var(--max)) / 2); } }
.does-track::-webkit-scrollbar { display: none; }
.do-card { flex: 0 0 min(400px, 84vw); scroll-snap-align: start; }
.do-card .num { margin-top: var(--s-32); margin-bottom: var(--s-8); }
.do-card h3 { margin-bottom: var(--s-8); }

.mock { height: 280px; border-radius: var(--r-md); background: var(--n-900); border: 1px solid var(--line); padding: 28px; overflow: hidden; position: relative; font-size: 13px; }
.mock ul { list-style: none; margin: 0; padding: 0; }
.m-title { font-weight: 600; font-size: 14px; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.m-tag { font-size: 11px; font-weight: 500; color: var(--teal-200); background: var(--teal-900); padding: 3px 8px; border-radius: 20px; }
.mock-list li { padding: 11px 0; border-top: 1px solid var(--line); opacity: 0; animation: m-row 7s var(--ease) infinite; }
.mock-list li:nth-child(2) { animation-delay: .2s; } .mock-list li:nth-child(3) { animation-delay: .4s; } .mock-list li:nth-child(4) { animation-delay: .6s; } .mock-list li:nth-child(5) { animation-delay: .8s; }
.m-more { color: var(--n-400); }
@keyframes m-row { 0% { opacity: 0; transform: translateX(-8px); } 12%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.m-ring { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.m-ring svg { width: 56px; height: 56px; transform: rotate(-90deg); }
.m-ring circle { fill: none; stroke: var(--n-800); stroke-width: 4; }
.m-ring .m-ring-on { stroke: var(--accent); stroke-dasharray: 100.5; stroke-dashoffset: 100.5; animation: m-ring 7s var(--ease) infinite; }
@keyframes m-ring { 0% { stroke-dashoffset: 100.5; } 30%, 90% { stroke-dashoffset: 37.7; } 100% { stroke-dashoffset: 37.7; opacity: 0; } }
.m-ring b { display: block; font: 500 20px var(--font-display); }
.m-ring span { font-size: 12px; color: var(--n-400); }
.mock-missing li { display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--line); }
.mock-missing li::after { content: "Missing"; font-size: 11px; color: var(--due); }
.mock-due li { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); animation: m-sort 7s var(--ease) infinite; }
.mock-due li:nth-child(2) { animation-delay: .15s; } .mock-due li:nth-child(3) { animation-delay: .3s; } .mock-due li:nth-child(4) { animation-delay: .45s; }
.mock-due em { font-style: normal; font-size: 11px; color: var(--due); }
.mock-due em.later { color: var(--n-400); }
@keyframes m-sort { 0% { opacity: 0; transform: translateY(8px); } 12%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.mock-id { display: grid; place-items: center; background: radial-gradient(100% 80% at 50% 0%, var(--teal-900), var(--n-900)); }
.m-idcard { width: 240px; border-radius: 14px; padding: 20px; background: var(--black); border: 1px solid var(--teal-700); display: grid; grid-template-columns: 1fr 64px; gap: 6px 12px; box-shadow: 0 20px 60px rgba(0,0,0,.5); animation: m-float 6s ease-in-out infinite; }
.m-idcard img { width: 30px; grid-column: 1 / -1; margin-bottom: 8px; }
.m-co { font-weight: 600; font-size: 13px; }
.m-status { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--teal-200); }
.m-status span { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.m-qr { grid-column: 2; grid-row: 2 / span 2; width: 64px; height: 64px; border-radius: 6px;
  background: conic-gradient(from 90deg at 50% 50%, var(--light) 25%, transparent 0 50%, var(--light) 0 75%, transparent 0) 0 0 / 12px 12px; opacity: .85; }
@keyframes m-float { 50% { transform: translateY(-6px) rotate(-1deg); } }

/* ---------- 6. Check any company ---------- */
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-64); align-items: center; }
.check-grid > *, .feats-grid > *, .why-grid > * { min-width: 0; }
.check-grid .t-lead { margin-top: var(--s-24); max-width: 32em; }
.check-box { padding: var(--s-32); }
.check-form label { display: block; margin-bottom: var(--s-8); }
.check-row { display: flex; gap: var(--s-8); }
.check-row input { flex: 1; min-width: 0; height: 48px; padding: 0 var(--s-16); border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--black); color: var(--light); font: 400 15px var(--font-ui); }
.check-row input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.check-result { margin-top: var(--s-24); padding-top: var(--s-24); border-top: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-16); align-items: center; }
.check-co { font-weight: 600; }
.check-status { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 20px; background: var(--teal-900); color: var(--teal-100); font-size: 13px; font-weight: 600; }
.check-status span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* ---------- 7. What a missing document costs ---------- */
.stakes { position: relative; overflow: hidden; background: var(--black); min-height: 92vh; display: grid; align-items: center; }
.stakes-art { position: absolute; inset: 0; }
.stakes-art img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.stakes-shade { position: absolute; inset: 0; background:
  linear-gradient(180deg, var(--black) 0%, rgba(0,3,5,0) 24%, rgba(0,3,5,0) 60%, var(--black) 100%),
  linear-gradient(90deg, rgba(0,3,5,.7) 0%, rgba(0,3,5,.35) 55%, rgba(0,3,5,.1) 100%); }
.stakes-inner { position: relative; z-index: 1; padding-top: var(--section-y); padding-bottom: var(--section-y); }
.stakes h2 { max-width: 15em; }
.stakes-grid { margin-top: var(--s-64); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-40); }
.stakes-grid > div { border-top: 1px solid rgba(233,240,242,.25); padding-top: var(--s-24); }
.stakes-grid h3 { margin-bottom: var(--s-8); }
.stakes-grid .t-body { color: var(--n-100); }

/* ---------- 8. Built for how trade runs: list left, one visual right (after Ramp's "Busywork? Sorted.") ---------- */
.feats-grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s-64); align-items: center; }
.feats-list { list-style: none; margin: var(--s-40) 0 0; padding: 0; }
.feats-list li { border-top: 1px solid var(--line); }
.feats-list li:last-child { border-bottom: 1px solid var(--line); }
.feats-list button { position: relative; display: block; width: 100%; text-align: left; background: none; border: 0; color: inherit; font: inherit; padding: var(--s-24) 0; cursor: pointer; }
.f-title { display: block; font: 500 var(--fs-h3)/1.25 var(--font-display); letter-spacing: -0.015em; color: var(--n-400); transition: color .3s var(--ease); }
.feats-list li.on .f-title, .feats-list button:hover .f-title { color: var(--white); }
.f-desc { display: block; max-height: 0; overflow: hidden; opacity: 0; font-size: var(--fs-body); line-height: 1.55; color: var(--text-2); transition: max-height .5s var(--ease), opacity .4s var(--ease), margin .4s var(--ease); }
.feats-list li.on .f-desc { max-height: 120px; opacity: 1; margin-top: var(--s-8); }
.f-bar { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--accent); }
.feats-list li.on .f-bar { animation: f-bar var(--f-time, 6s) linear forwards; }
.feats-list.paused li.on .f-bar { animation: none; width: 100%; }
@keyframes f-bar { to { width: 100%; } }

.feats-visual { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3.4; border: 1px solid var(--line); }
.feats-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; transform: scale(1.04); }
.feats-shade { position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 55%, rgba(0,3,5,.35), rgba(0,3,5,0) 80%); }
.fv { position: absolute; left: 50%; top: 52%; width: min(380px, 78%); transform: translate(-50%, -46%); opacity: 0;
  background: rgba(0, 3, 5, .88); border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 28px; box-shadow: 0 40px 100px rgba(0,0,0,.55);
  transition: opacity .5s var(--ease), transform .6s var(--ease); font-size: 13px; }
.fv.on { opacity: 1; transform: translate(-50%, -50%); }
.fv-title { display: flex; justify-content: space-between; font-weight: 600; font-size: 14px; margin-bottom: 12px; }
.fv-title span { font-weight: 400; color: var(--n-400); font-size: 12px; }
.fv ul { list-style: none; margin: 0; padding: 0; }
.fv-files li { display: flex; align-items: center; gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); }
.fv-files i { font-style: normal; font-size: 10px; font-weight: 600; background: var(--teal-800); color: var(--teal-100); padding: 3px 5px; border-radius: 4px; }
.fv-files em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.fv-versions li { display: flex; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--line); color: var(--n-300); }
.fv-versions li.cur { color: var(--white); }
.fv-versions li.cur span { color: var(--accent); }
.fv-lang li { position: relative; padding: 14px 0; border-top: 1px solid var(--line); height: 48px; }
.fv-lang span, .fv-switch b { transition: opacity .4s var(--ease); }
.fv-lang .pt { position: absolute; left: 0; top: 14px; opacity: 0; }
.fv.on .fv-lang .en { animation: lang-out 4s var(--ease) infinite; }
.fv.on .fv-lang .pt { animation: lang-in 4s var(--ease) infinite; }
.fv-switch { margin-top: 16px; display: inline-flex; gap: 4px; padding: 4px; border-radius: 20px; border: 1px solid var(--line-strong); }
.fv-switch b { font-size: 11px; padding: 4px 10px; border-radius: 16px; }
.fv.on .fv-switch .en { animation: pill-en 4s var(--ease) infinite; }
.fv.on .fv-switch .pt { animation: pill-pt 4s var(--ease) infinite; }
@keyframes lang-out { 0%, 40% { opacity: 1; } 50%, 90% { opacity: 0; } 100% { opacity: 1; } }
@keyframes lang-in { 0%, 40% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pill-en { 0%, 40% { background: var(--teal-800); } 50%, 90% { background: transparent; } 100% { background: var(--teal-800); } }
@keyframes pill-pt { 0%, 40% { background: transparent; } 50%, 90% { background: var(--teal-800); } 100% { background: transparent; } }
.fv-msg { padding: 12px 14px; border-radius: 12px; margin-top: 10px; max-width: 86%; line-height: 1.45; }
.fv-msg.me { background: var(--n-800); margin-left: auto; }
.fv-msg.them { background: var(--teal-900); color: var(--teal-100); }
.fv.on .fv-msg.them { animation: msg-in 4s var(--ease) infinite; }
@keyframes msg-in { 0%, 25% { opacity: 0; transform: translateY(6px); } 35%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ---------- 9. Three reasons: each claim shown happening, as a small moment of the product ----------
   Every moment loops on an 8 second cycle once its row is on screen. The resting styles are the end state,
   so a still render and reduced motion both show the outcome. */
.reasons-title { margin-bottom: var(--s-64); }
.reason { display: grid; grid-template-columns: 80px 1fr minmax(360px, 440px); gap: var(--s-48); align-items: center; padding: var(--s-48) 0; border-top: 1px solid var(--line-strong); }
.reason .num { margin: 0; }
.reason h3 { margin-bottom: var(--s-8); }
.reason .t-body { max-width: 46ch; }
.vig { position: relative; height: 200px; border-radius: var(--r-md); background: var(--n-900); border: 1px solid var(--line); padding: 24px 28px; overflow: hidden; font-size: 13px; }
.vig * { animation-duration: 8s; animation-iteration-count: infinite; animation-timing-function: var(--ease); animation-play-state: paused; }
.reason.in .vig * { animation-play-state: running; }

/* 01 Less chasing: three missing documents tick off to none */
.v-head { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.v-count { position: relative; font-weight: 500; font-size: 12px; width: 76px; height: 18px; text-align: right; }
.v-count i { position: absolute; right: 0; top: 0; font-style: normal; white-space: nowrap; opacity: 0; color: var(--due); }
.v-count i.c0 { opacity: 1; color: var(--cyan); }
.v-count .c3 { animation-name: c3; } .v-count .c2 { animation-name: c2; } .v-count .c1 { animation-name: c1; } .v-count .c0 { animation-name: c0; }
@keyframes c3 { 0%, 26% { opacity: 1; } 28%, 100% { opacity: 0; } }
@keyframes c2 { 0%, 26% { opacity: 0; } 28%, 42% { opacity: 1; } 44%, 100% { opacity: 0; } }
@keyframes c1 { 0%, 42% { opacity: 0; } 44%, 58% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes c0 { 0%, 58% { opacity: 0; } 60%, 94% { opacity: 1; } 100% { opacity: 0; } }
.vig-chase ul { list-style: none; margin: 0; padding: 0; }
.vig-chase li { position: relative; display: flex; justify-content: space-between; padding: 11px 0; border-top: 1px solid var(--line); }
.vig-chase li em { position: absolute; right: 0; font-style: normal; font-size: 12px; font-weight: 600; }
.vig-chase .miss { color: var(--due); opacity: 0; }
.vig-chase .ok { color: var(--cyan); }
.vig-chase .r1 .miss { animation-name: miss1; } .vig-chase .r1 .ok { animation-name: ok1; }
.vig-chase .r2 .miss { animation-name: miss2; } .vig-chase .r2 .ok { animation-name: ok2; }
.vig-chase .r3 .miss { animation-name: miss3; } .vig-chase .r3 .ok { animation-name: ok3; }
@keyframes miss1 { 0%, 26% { opacity: 1; } 28%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ok1 { 0%, 26% { opacity: 0; } 28%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes miss2 { 0%, 42% { opacity: 1; } 44%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ok2 { 0%, 42% { opacity: 0; } 44%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes miss3 { 0%, 58% { opacity: 1; } 60%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ok3 { 0%, 58% { opacity: 0; } 60%, 94% { opacity: 1; } 100% { opacity: 0; } }
.v-bar { margin-top: 10px; height: 4px; border-radius: 2px; background: var(--n-800); overflow: hidden; }
.v-bar i { display: block; height: 100%; width: 100%; background: var(--cyan); animation-name: vbar; }
@keyframes vbar { 0%, 20% { width: 0; } 28% { width: 33%; } 44% { width: 66%; } 60%, 94% { width: 100%; } 100% { width: 0; } }

/* 02 Fewer surprises: the gap is flagged weeks before the goods move */
.vig-time { display: flex; flex-direction: column; justify-content: flex-end; }
.v-flag { align-self: flex-start; margin-left: calc(36% - 18px); margin-bottom: 18px; padding: 10px 14px; border-radius: 10px; background: var(--due-subtle); border: 1px solid var(--due); color: var(--light); position: relative; animation-name: vflag; }
.v-flag::after { content: ""; position: absolute; left: 18px; bottom: -6px; width: 10px; height: 10px; background: var(--due-subtle); border-right: 1px solid var(--due); border-bottom: 1px solid var(--due); transform: rotate(45deg); }
.v-flag b { display: block; font-weight: 600; font-size: 12px; color: var(--due); }
.v-flag span { font-size: 12px; color: var(--n-200); }
@keyframes vflag { 0%, 38% { opacity: 0; transform: translateY(-10px); } 46%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.v-line { position: relative; height: 2px; background: var(--n-800); margin: 0 26px 44px 14px; }
.v-fill { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: var(--teal-500); animation-name: vfill; }
@keyframes vfill { 0%, 6% { width: 0; } 32%, 94% { width: 100%; } 100% { width: 0; } }
.v-pt { position: absolute; top: -5px; transform: translateX(-50%); display: grid; justify-items: center; gap: 2px; animation-name: vpt; }
.v-pt i { width: 12px; height: 12px; border-radius: 50%; background: var(--teal-500); border: 2px solid var(--n-900); box-sizing: content-box; margin-top: -2px; }
.v-pt b { margin-top: 8px; font-size: 11px; font-weight: 600; color: var(--light); white-space: nowrap; }
.v-pt em { font-style: normal; font-size: 11px; color: var(--n-400); white-space: nowrap; }
.v-pt.today { left: 0; } .v-pt.today i { background: var(--light); } .v-pt.today b { color: var(--n-300); font-weight: 500; }
.v-pt.ship { left: 36%; } .v-pt.arrive { left: 76%; } .v-pt.customs { left: 100%; }
.v-pt.ship i { background: var(--due); animation-name: vpulse; }
.v-pt.today { animation-name: none; }
.v-pt.ship { animation-delay: 0s; } .v-pt.arrive, .v-pt.customs { animation-name: vpt2; }
@keyframes vpt { 0%, 12% { opacity: 0; } 18%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes vpt2 { 0%, 22% { opacity: 0; } 30%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes vpulse { 0%, 46% { box-shadow: 0 0 0 0 rgba(217, 149, 29, 0); } 52% { box-shadow: 0 0 0 6px rgba(217, 149, 29, .35); } 60%, 100% { box-shadow: 0 0 0 0 rgba(217, 149, 29, 0); } }

/* 03 Proof of who you are: a shared link opens the public Orbitra ID page */
.v-link { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 10px; border-radius: 20px; background: var(--n-850); border: 1px solid var(--line-strong); color: var(--light); font-size: 12px; animation-name: vlink; }
.v-link svg { width: 16px; height: 16px; fill: none; stroke: var(--cyan); stroke-width: 1.8; stroke-linecap: round; }
@keyframes vlink { 0%, 4% { opacity: 0; transform: translateY(6px); } 12%, 22% { opacity: 1; transform: none; } 25% { transform: scale(.96); } 28%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.v-page { margin-top: 14px; display: grid; grid-template-columns: auto 1fr auto; gap: 4px 14px; align-items: center; padding: 16px 18px; border-radius: 12px; background: var(--black); border: 1px solid var(--teal-700); animation-name: vpage; }
.v-page img { width: 34px; }
.v-co { font-weight: 600; font-size: 14px; }
.v-sub { font-size: 11px; color: var(--n-400); }
.v-status { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 14px; background: var(--teal-900); color: var(--teal-100); font-size: 12px; font-weight: 600; }
.v-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); }
.v-note { grid-column: 1 / -1; margin-top: 8px; font-size: 11px; color: var(--n-400); }
@keyframes vpage { 0%, 28% { opacity: 0; transform: translateY(14px); } 40%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ---------- 10. How you start ---------- */
.start-steps { list-style: none; padding: 0; margin: var(--s-64) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-48); }
.start-steps li { border-top: 1px solid var(--line-strong); padding-top: var(--s-24); }
.start-steps h3 { margin-bottom: var(--s-8); }

/* ---------- 11. Closing call: an inset card with rounded corners, as HQ's closing panel ---------- */
.close { padding: 0 var(--s-40) var(--section-y); }
.close > .wrap { max-width: none; padding: 0; }
.close-frame { position: relative; border-radius: var(--r-lg); overflow: hidden; min-height: min(680px, 80vh); display: grid; place-items: center; }
.close-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 72%; }
.close-shade { position: absolute; inset: 0; background:
  radial-gradient(50% 50% at 50% 50%, rgba(0,3,5,.7) 0%, rgba(0,3,5,.36) 55%, rgba(0,3,5,0) 85%); }
.close-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-24);
  padding: var(--s-48) var(--s-24); max-width: 640px; margin: 0 auto; }
.close-copy h2 { text-shadow: 0 2px 24px rgba(0, 3, 5, .5); }
.close-copy .t-lead { color: var(--white); text-shadow: 0 1px 12px rgba(0, 3, 5, .6); }
.close-copy .btn { margin-top: var(--s-8); }

/* ---------- 12. Footer, after Linear's: the mark alone, five spaced columns, a quiet legal line ---------- */
.foot { border-top: 1px solid rgba(233, 240, 242, .08); }
.foot-inner { padding: var(--s-80) var(--s-40) var(--s-40); max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; }
.foot-top { display: grid; grid-template-columns: 1fr 4fr; gap: var(--s-48); }
.foot-mark img { width: 36px; height: auto; }
.foot-cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-40); }
.foot-cols > div { display: grid; gap: 14px; align-content: start; }
.foot-h { font-size: 13px; font-weight: 500; color: var(--light); margin-bottom: 6px; }
.foot-cols a { font-size: 13px; color: var(--n-400); text-decoration: none; transition: color .2s var(--ease); width: fit-content; }
.foot-cols a:hover, .foot-cols a[aria-current="true"] { color: var(--light); }
.foot-base { margin-top: var(--s-128); display: flex; gap: var(--s-24); font-size: 12px; color: var(--n-500); }

/* ---------- Tablet and phone ---------- */
@media (max-width: 1100px) {
  .app { width: 66vw; transform: translate(-36%, -50%); }
  .story.s4 .app { transform: translate(-36%, -50%) scale(.6); }
}
@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-menu { display: inline-flex; align-items: center; }
  .hero-art img { object-position: 64% 70%; }
  .hero-shade { background: linear-gradient(180deg, rgba(0,3,5,.45) 0%, rgba(0,3,5,0) 25%, rgba(0,3,5,.2) 45%, rgba(0,3,5,.7) 80%, rgba(0,3,5,.85) 100%); }
  .hero-copy { left: var(--s-16); right: var(--s-16); width: auto; bottom: 48px; }
  .hero-copy h1 { font-size: min(var(--fs-display), 8.4vw); }
  .why-grid, .start-steps, .stakes-grid { grid-template-columns: 1fr; gap: var(--s-32); }
  .check-grid, .feats-grid { grid-template-columns: 1fr; gap: var(--s-40); }
  .reason { grid-template-columns: 48px 1fr; gap: var(--s-24); }
  .vig { grid-column: 1 / -1; }
  .foot-inner { padding: var(--s-64) var(--s-16) var(--s-32); }
  .foot-top { grid-template-columns: 1fr; gap: var(--s-40); }
  .foot-cols { grid-template-columns: 1fr 1fr; gap: var(--s-40) var(--s-24); }
  .foot-base { margin-top: var(--s-64); flex-direction: column; gap: var(--s-8); }
  .nav-inner { padding: 0 var(--s-16); }
  .close { padding: 0 var(--s-16) var(--section-y); }
  .does-track { gap: var(--s-24); }
  .does-head { flex-direction: column; align-items: flex-start; }
  .feats-visual { aspect-ratio: 4 / 4.4; }
  .close-frame { min-height: 560px; }

  /* Story on a phone: the window fills the width, one step shows at a time */
  .story-head { padding-top: 96px; }
  .app { width: calc(100vw - 32px); height: 60vh; top: 55%; transform: translate(-50%, -50%); grid-template-columns: 1fr; }
  .story.s4 .app { transform: translate(-50%, -50%) scale(.6); }
  .app-rail { display: none; }
  .app-main { padding: 16px 16px 0; }
  .pane { left: 16px; right: 16px; top: 56px; bottom: 16px; }
  .form { grid-template-columns: 1fr; gap: 14px; }
  .trade-meta { grid-template-columns: 1fr 1fr; gap: 10px; }
  .docs { padding: 18px 18px 6px; }
  .doc-rows li { grid-template-columns: 1fr 70px; padding: 14px 0; }
  .doc-due { display: none; }
  .story-steps { left: 16px; right: 16px; bottom: 3vh; width: auto; padding: var(--s-16) var(--s-24); }
  .story-steps li { display: none; border: 0; padding: 0; }
  .story-steps li.on { display: block; }
  .flock-falcon { left: 50%; width: 76vw; }
}