/* ECHO site v2 · BoardVision page: A (dark product card hero) + D (sticky steps, a highlight walks the real screen). */
:root{--gut:max(24px,calc((100vw - 1328px)/2))}
.bv-page{background:radial-gradient(60% 55% at 72% 22%,#faf3e7,rgba(250,243,231,0) 70%),linear-gradient(180deg,#f3eee5,#ece6db)}
.bv{position:relative}
/* hero */
.bv-hero{position:relative;min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;padding:120px var(--gut) 60px}
.bv-crumbs{font-size:13px;color:#666158}.bv-crumbs a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(16,16,14,.2)}
.bv-eyebrow{margin-top:34px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#7a6650}
.bv-title{margin-top:18px;font-weight:500;line-height:.95}
.bv-name{display:block;font-size:clamp(56px,6.6vw,104px);letter-spacing:-.065em}
.bv-dash{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.bv-sub{display:block;margin-top:16px;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.025em;line-height:1.2;font-weight:500}
.bv-intro{margin-top:22px;max-width:520px;font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.6;color:#4a463f}
.bv-cta{margin-top:30px}
.bv-card{position:relative;perspective:1600px;margin:0}
.bv-card-in{position:relative;border-radius:26px;padding:56px 18px 18px;background:radial-gradient(80% 60% at 50% 0%,#2a2620,#10100e 70%);box-shadow:0 70px 130px -50px rgba(40,30,10,.6),0 1px 0 rgba(255,255,255,.08) inset;transform:rotateY(var(--ry,-12deg)) rotateX(var(--rx,4deg));transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,0,0,1)}
.bv-card-tag{position:absolute;left:28px;top:22px;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.2em;color:#e4d3bb}
.bv-card-shot{display:block;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.bv-card-shot img{width:100%;height:auto;display:block}
.bv-card figcaption{margin-top:18px;font-size:13px;color:#666158;text-align:right}
/* entrance */
@keyframes v2up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}@keyframes v2card{from{opacity:0;transform:translateY(40px) scale(.97);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
html.js:not(.static) .bv-hero-copy>*{animation:v2up .7s cubic-bezier(.16,1,.3,1) both}
html.js:not(.static) .bv-card{animation:v2card 1s cubic-bezier(.2,0,0,1) .12s both}
.bv-hero-copy>*:nth-child(2){animation-delay:.05s}.bv-hero-copy>*:nth-child(3){animation-delay:.1s}.bv-hero-copy>*:nth-child(4){animation-delay:.15s}.bv-hero-copy>*:nth-child(5){animation-delay:.2s}
@media (prefers-reduced-motion:reduce){html.js .bv-hero-copy>*,html.js .bv-card{animation:none}}
/* steps */
.bv-steps{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;padding:40px var(--gut) 80px}
.bv-media{grid-column:2;grid-row:1;position:sticky;top:110px;align-self:start;height:calc(100vh - 150px);display:flex;flex-direction:column;justify-content:center}
.bv-screen{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 50px 100px -40px rgba(40,30,10,.5);background:#10100e}
.bv-screen img{display:block;width:100%;height:auto}
.bv-shade{position:absolute;inset:0;background:rgba(16,16,14,.42);transition:opacity .6s}
.bv-focus{position:absolute;border:2px solid #e4d3bb;border-radius:12px;box-shadow:0 0 0 1px rgba(16,16,14,.4),0 0 40px rgba(228,211,187,.35);transition:left .9s cubic-bezier(.2,0,0,1),top .9s cubic-bezier(.2,0,0,1),width .9s cubic-bezier(.2,0,0,1),height .9s cubic-bezier(.2,0,0,1);backdrop-filter:brightness(2.1);-webkit-backdrop-filter:brightness(2.1)}
.bv-count{margin-top:18px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.2em;color:#666158}.bv-count b{color:#10100e;font-weight:400}
.bv-text{grid-column:1;grid-row:1}
.bv-step{min-height:78vh;display:flex;flex-direction:column;justify-content:center;padding:40px 0;border-top:1px solid rgba(16,16,14,.12);opacity:.32;transition:opacity .6s ease}
.bv-step:first-child{border-top:0}
.bv-step.is-on{opacity:1}
.bv-no{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.2em;color:#7a6650}
.bv-step h2{margin-top:14px;font-size:clamp(30px,2.9vw,44px);font-weight:500;letter-spacing:-.045em;line-height:1.02}
.bv-step p:not(.bv-no){margin-top:18px;max-width:500px;font-size:16px;line-height:1.65;color:#4a463f}
/* end + related */
.bv-end.ct{height:auto}
.bv-end .ct-pin{position:relative;min-height:86vh;height:auto;opacity:1}
.bv-end-text{max-width:720px;margin:0 auto;font-size:clamp(28px,3.2vw,46px);font-weight:500;letter-spacing:-.045em;line-height:1.08;text-shadow:0 0 50px #f6f0e6}
.bv-end .ct-actions{margin-top:230px}
.bv-related{padding:40px var(--gut) 110px}
.bv-related h2{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#666158;font-weight:400}
.bv-related ul{list-style:none;margin-top:24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.bv-rel{display:block;text-decoration:none;color:#10100e}
.bv-rel-photo{display:block;aspect-ratio:3/2;border-radius:18px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(40,30,10,.4)}
.bv-rel-photo img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,0,0,1)}
.bv-rel:hover .bv-rel-photo img{transform:scale(1.05)}
.bv-rel-title{display:block;margin-top:14px;font-size:19px;font-weight:500;letter-spacing:-.025em;line-height:1.25}
/* phones and tablets: hero stacked, the screen sticks on top while the steps scroll under it */
@media (max-width:900px){
  .bv-hero{grid-template-columns:1fr;gap:34px;padding:104px 20px 40px;min-height:0}
  .bv-card-in{--ry:0deg;--rx:0deg;padding:46px 10px 10px;border-radius:20px}
  .bv-card figcaption{text-align:left}
  .bv-steps{grid-template-columns:1fr;gap:0;padding:0 20px 40px}
  .bv-media{grid-column:1;grid-row:1;top:76px;height:auto;z-index:2;padding:12px 0 14px;background:linear-gradient(180deg,#efe9df 85%,rgba(239,233,223,0))}
  .bv-count{margin-top:10px}
  .bv-text{grid-row:2}
  .bv-step{min-height:62vh;padding:28px 0}
  .bv-end .ct-actions{margin-top:200px}
}
html.static .bv-step{opacity:1}
@media (prefers-reduced-motion:reduce){.bv-card-in,.bv-focus,.bv-step{transition:none}}
.bv-crumbs{display:block !important;position:static !important;height:auto !important;background:none !important;padding:0 !important}
.bv-crumbs a{display:inline !important}
@media (max-width:900px){.bv-step{scroll-margin-top:340px}}
@media (max-width:900px){
  .bv-media{background:#eee8de}
  .bv-media::after{content:"";position:absolute;left:0;right:0;top:100%;height:28px;background:linear-gradient(180deg,#eee8de,rgba(238,232,222,0));pointer-events:none}
}
@media (max-width:900px){.bv-media{top:60px;padding-top:20px}}

/* Aurora backgrounds (2026-10-23, Founder picked B). */
.bv-page{background:radial-gradient(60% 55% at 72% 22%,#fffbf2,rgba(255,251,242,0) 70%),radial-gradient(40% 45% at 8% 92%,rgba(160,200,196,.85),rgba(160,200,196,0) 70%),radial-gradient(40% 45% at 92% 96%,rgba(222,186,134,.7),rgba(222,186,134,0) 70%),linear-gradient(160deg,#f9f4ea,#e8dbc5 60%,#d8c6aa)}
/* validation status */
.bv-proof{box-sizing:border-box;width:100%;max-width:1180px;margin:0 auto;padding:clamp(56px,8vw,104px) clamp(20px,5vw,48px)}
.bv-proof h2{margin:0;font-size:clamp(30px,4vw,46px);font-weight:500;letter-spacing:-.035em;line-height:1.1}
.bv-proof-intro{max-width:640px;margin:18px 0 0;font-size:17px;line-height:1.6;color:#4a463f;text-wrap:pretty}
.bv-proof dl{margin:34px 0 0;border-top:1px solid rgba(16,16,14,.16)}
.bv-proof dl>div{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:8px 32px;padding:17px 0;border-bottom:1px solid rgba(16,16,14,.16)}
.bv-proof dt{font-weight:500;font-size:16px}
.bv-proof dd{margin:0;font-size:16px;line-height:1.55;color:#4a463f;text-wrap:pretty}
.bv-proof-date{margin:16px 0 0;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.06em;color:#5f5a50}
@media(max-width:640px){.bv-proof dl>div{grid-template-columns:1fr}}
/* product hero cards in each product's own colour, as on the home page */
.bv-vk .bv-card-in{background:radial-gradient(80% 50% at 100% 0%,rgba(255,255,255,.5),rgba(255,255,255,0) 70%),radial-gradient(90% 55% at 0% 100%,rgba(250,255,214,.85),rgba(250,255,214,0) 72%),linear-gradient(165deg,#c8f94b,#d4fb6e 55%,#e2fc9c)}
.bv-vk .bv-card-tag{color:#2a3312}
.bv-pt .bv-card-in{background:radial-gradient(85% 55% at 15% 0%,rgba(35,106,114,.7),rgba(35,106,114,0) 72%),radial-gradient(70% 45% at 100% 100%,rgba(84,160,158,.4),rgba(84,160,158,0) 72%),linear-gradient(165deg,#1d5c63,#174e55 60%,#1c5a60)}
.bv-pt .bv-card-tag{color:#cfe6e4}
/* more than one screen in the step view: extra screens sit on the first and fade in on their step */
.bv-screen .bv-alt{position:absolute;left:0;top:0;opacity:0;transition:opacity .5s}
@media (prefers-reduced-motion:reduce){.bv-screen .bv-alt{transition:none}}