/* /venture-capital/ - the page's own layout, on top of site.css and middle.css (same tokens, type and pills).
   Built by .deploy/build-vc.py. Motion is one short ease-in per block, and none with reduced motion. */
html { scroll-padding-top: 84px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.vc ul, .vc ol { list-style: none; }
.vc h3 { font-weight: 500; letter-spacing: -.03em; line-height: 1.15; }

/* hero: type only, so the four fixes start on the first screen */
.vc-hero { padding-top: clamp(28px, 7vh, 84px); }
.vc-eye { color: var(--accent); margin-bottom: clamp(18px, 3vh, 30px); }
.vc-hero .hero-top { margin-bottom: 0; align-items: end; }
.vc-hero h1 { font-size: clamp(40px, 5.4vw, 88px); }
@media (max-width: 380px) { .vc-hero h1 { font-size: 36px; } }
.vc main > section:not(.vc-hero) { padding-top: clamp(64px, 10vh, 120px); }

/* S2: problem on top, the fix under a rule */
.vc-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.vc-card { background: #fff; border-radius: var(--radius); padding: clamp(22px, 2vw, 30px); display: flex; flex-direction: column; gap: 12px; }
.vc-card > .lbl { color: var(--fg3); }
.vc-card h3 { font-size: clamp(21px, 1.7vw, 26px); text-wrap: balance; min-height: 2.3em; }
@media (max-width: 620px) { .vc-card h3 { min-height: 0; } }
.vc-to { padding-top: 16px; border-top: 1px solid var(--line); color: var(--fg2); font-size: 15px; }
.vc-to b { display: block; color: var(--accent); font-weight: 400; margin-bottom: 8px; }
@media (max-width: 1180px) { .vc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .vc-cards { grid-template-columns: 1fr; } }

/* S3: three concept pieces, each one a link to its live page, labeled on the picture */
.vc-pieces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.vc-piece { display: flex; flex-direction: column; gap: 10px; height: 100%; background: #fff; border-radius: var(--radius); padding: 12px 12px 22px; transition: box-shadow .35s; }
.vc-piece:hover { box-shadow: 0 24px 60px rgba(40, 36, 28, .12); }
.vc-piece .media { position: relative; display: block; border-radius: 14px; overflow: hidden; background: var(--frame); aspect-ratio: 16 / 10; margin-bottom: 8px; }
.vc-piece img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.vc-piece > .lbl, .vc-piece h3, .vc-piece p, .vc-piece .go { padding: 0 10px; }
.vc-piece > .lbl { color: var(--accent); }
.vc-piece h3 { font-size: clamp(20px, 1.7vw, 26px); }
.vc-piece p { color: var(--fg2); font-size: 15px; }
.vc-piece .go { margin-top: auto; padding-top: 10px; font-size: 14px; font-weight: 500; }
.vc-piece:hover .go { color: var(--accent); }
.vc .tag { display: inline-block; color: #3D3B34; padding: 5px 9px; border-radius: 999px; background: rgba(236, 233, 225, .94); }
.vc-piece .tag { position: absolute; left: 10px; top: 10px; max-width: calc(100% - 20px); }
@media (prefers-reduced-motion: no-preference) {
  .vc-piece img { transition: transform .6s cubic-bezier(.16, .84, .26, 1); }
  .vc-piece:hover img { transform: scale(1.025); }
}
@media (max-width: 980px) { .vc-pieces { grid-template-columns: 1fr; } .vc-piece { max-width: 640px; } }

/* the portfolio-sync demo: a small sheet on the left, the page it feeds on the right */
.vc-demo { margin-top: 14px; background: #fff; border-radius: var(--radius); padding: clamp(18px, 3vw, 40px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(20px, 3vw, 48px); align-items: start; }
.dm-head { grid-column: 1 / -1; display: grid; gap: 10px; justify-items: start; }
.dm-head .tag { background: var(--accent); color: #fff; }
.dm-head h3 { font-size: clamp(24px, 2.4vw, 36px); letter-spacing: -.035em; }
.dm-head p { color: var(--fg2); max-width: 68ch; font-size: 15px; }
.dm-sheet > .lbl, .dm-page > .lbl { display: block; color: var(--fg3); margin-bottom: 10px; }
.dm-sheet table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; border: 1px solid var(--line); border-radius: 12px; }
.dm-sheet th, .dm-sheet td { text-align: left; padding: 10px 12px; border-top: 1px solid var(--line); vertical-align: middle; }
.dm-sheet thead th { border-top: 0; font: 400 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg3); background: var(--bg); }
.dm-sheet th:nth-child(2), .dm-sheet td:nth-child(2) { width: 34%; }
.dm-sheet .c { width: 68px; text-align: center; }
.dm-sheet tbody th { font-weight: 500; overflow-wrap: anywhere; }
.dm-sheet tbody th small { display: block; font-weight: 400; color: var(--fg3); font-size: 12.5px; }
.dm-sheet select { width: 100%; min-height: 40px; padding: 0 8px; border: 1px solid rgba(18, 18, 18, .28); border-radius: 8px; background: #fff; color: var(--fg); font: 14px var(--sans); }
.dm-sheet input { width: 24px; height: 24px; accent-color: var(--accent); vertical-align: middle; }
.dm-page { background: var(--bg); border-radius: 14px; padding: clamp(14px, 2vw, 24px); align-self: stretch; }
.dm-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.dm-filter button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: #fff; color: var(--fg); font: 500 13px/1 var(--sans); cursor: pointer; }
.dm-filter button:hover { background: var(--frame); }
.dm-filter button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.no-js .dm-filter { display: none; }
.dm-list h4 { color: var(--accent); font-weight: 400; margin: 14px 0 8px; }
.dm-list h4:first-child { margin-top: 0; }
.dm-list ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dm-list li { background: #fff; border-radius: 12px; padding: 12px 14px; display: grid; gap: 2px; align-content: start; }
.dm-list b { font-weight: 500; letter-spacing: -.01em; line-height: 1.25; overflow-wrap: anywhere; }
.dm-list span { color: var(--fg2); font-size: 13.5px; }
.dm-list i { font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-top: 6px; }
.dm-list .none { color: var(--fg2); font-size: 14px; }
@media (max-width: 900px) { .vc-demo { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .dm-list ul { grid-template-columns: 1fr; } .dm-sheet th, .dm-sheet td { padding: 10px 8px; } .dm-sheet .c { width: 54px; } .dm-sheet th:nth-child(2), .dm-sheet td:nth-child(2) { width: 40%; } }

/* S4: three ways, the same cards as the homepage plans, without the tilt or the moving border */
.vc-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.vc-ways .plan { transform: none; }
.vc-ways .price { font-size: clamp(40px, 4vw, 64px); }
.vc-ways .price .pre { font-size: .28em; letter-spacing: 0; font-weight: 400; margin: 0 8px 0 0; }
.vc-ways .plan ul { grid-template-columns: 1fr; }
@media (max-width: 980px) { .vc-ways { grid-template-columns: 1fr; } }

/* S5: three steps on the dark band */
.vc-how .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 48px); }
.vc-how .how-band .steps li { padding-top: 0; }
.vc-how .big-n { font-size: clamp(56px, 6.4vw, 104px); }
.vc-how .how-band .sec-head { margin-bottom: clamp(28px, 5vh, 48px); }
@media (max-width: 900px) { .vc-how .steps { grid-template-columns: 1fr; gap: 34px; } .vc-how .how-band .steps li { padding: 0; } }

/* what you get at hand-off: four plain lines under the steps */
.vc-hand { margin-top: clamp(36px, 6vh, 64px); padding-top: 22px; border-top: 1px solid rgba(244, 242, 236, .14); }
.vc-hand h3 { color: var(--accent-hi); font-weight: 400; letter-spacing: .12em; margin-bottom: 18px; }
.vc-hand ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px clamp(20px, 3vw, 48px); }
.vc-hand li { display: grid; gap: 6px; align-content: start; }
.vc-hand b { font-weight: 500; font-size: 17px; letter-spacing: -.015em; line-height: 1.25; }
.vc-hand span { color: #A9A79F; font-size: 14.5px; line-height: 1.5; }
@media (max-width: 1100px) { .vc-hand ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .vc-hand ul { grid-template-columns: 1fr; } }

/* S6: the last call to action, a plain frame (no 3D mark on this page) */
.vc-close { padding-bottom: clamp(64px, 10vh, 120px); }
.vc-end { background: var(--frame); border-radius: var(--radius); padding: clamp(28px, 5vw, 72px); }
.vc-end h2 { font-size: clamp(44px, 7vw, 120px); font-weight: var(--h-w); letter-spacing: -.055em; line-height: .95; }
.vc-end > p { color: #45443E; margin: 18px 0 24px; max-width: 52ch; font-size: 17px; }
.vc-end .close-meta { font-family: var(--mono); font-size: 12px; line-height: 1.7; color: #45443E; margin: 22px 0 0; }
.vc-end .close-meta a { color: var(--fg); border-bottom: 1px solid var(--accent); display: inline-block; padding: 6px 0; }
.vc-end .ctas { gap: 10px 14px; }
@media (max-width: 480px) { .vc-end .pill.big { min-height: 52px; padding: 0 20px; font-size: 15px; } }

/* one short ease-in per block; the class is only set when motion is allowed (see the page script) */
.rv-on .rv { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.16, .84, .26, 1); }
.rv-on .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv-on .rv { opacity: 1; transform: none; transition: none; } .vc-piece, .vc-piece img { transition: none; } }